From 0960b480a69430b2202d1d403bac6e47737a3e96 Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Tue, 1 Apr 2025 16:48:04 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=85=E7=89=87=E9=A1=B5=E9=9D=A2=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reading/clinical-data/index.vue           |    2 +-
 .../trials-panel/reading/dicoms/index.vue     |    9 +-
 .../reading/dicoms3D/components/ReadPage.vue  | 1787 +++++++++++++++++
 .../dicoms3D/components/ReportPage.vue        |    0
 .../reading/dicoms3D/components/StudyList.vue |  273 +++
 .../reading/dicoms3D/components/Viewport.vue  |  551 +++++
 .../dicoms3D/components/VisitReview.vue       |   79 +
 .../reading/dicoms3D/components/toolConfig.js |  193 ++
 .../trials-panel/reading/dicoms3D/index.vue   |  113 ++
 .../visit-review/components/ReadPage.vue      |    4 +-
 10 files changed, 3006 insertions(+), 5 deletions(-)
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/components/ReportPage.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/components/VisitReview.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/components/toolConfig.js
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/index.vue

diff --git a/src/views/trials/trials-panel/reading/clinical-data/index.vue b/src/views/trials/trials-panel/reading/clinical-data/index.vue
index 2f0ebf6e..3d7b5eba 100644
--- a/src/views/trials/trials-panel/reading/clinical-data/index.vue
+++ b/src/views/trials/trials-panel/reading/clinical-data/index.vue
@@ -277,7 +277,7 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .preview-wrapper{
   display: flex;
   flex-direction: row !important;
diff --git a/src/views/trials/trials-panel/reading/dicoms/index.vue b/src/views/trials/trials-panel/reading/dicoms/index.vue
index 195383c1..70d0ebe2 100644
--- a/src/views/trials/trials-panel/reading/dicoms/index.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/index.vue
@@ -1,7 +1,10 @@
 <template>
   <div ref="container" style="width:100%;height:100%" class="dicom-container">
     <!-- 访视阅片 -->
-    <div v-if="(isReadingTaskViewInOrder === 1 || ((isReadingTaskViewInOrder !== 1) && isShow)) && readingCategory=== 1 && CriterionType !== 0" class="reading-wrapper">
+    <div v-if="readingCategory=== 1 && (CriterionType === 7)" class="reading-wrapper">
+      <VisitReview />
+    </div>
+    <div v-else-if="(isReadingTaskViewInOrder === 1 || ((isReadingTaskViewInOrder !== 1) && isShow)) && readingCategory=== 1 && CriterionType !== 0" class="reading-wrapper">
       <el-tabs v-model="activeName" v-loading="loading" :before-leave="beforeLeave">
         <!-- 阅片 -->
         <el-tab-pane :label="$t('trials:reading:tabTitle:review')" name="read">
@@ -29,7 +32,7 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-    <div v-if="(isReadingTaskViewInOrder === 1 || ((isReadingTaskViewInOrder !== 1) && isShow)) && readingCategory=== 1 && CriterionType === 0" class="reading-wrapper">
+    <div v-else-if="(isReadingTaskViewInOrder === 1 || ((isReadingTaskViewInOrder !== 1) && isShow)) && readingCategory=== 1 && CriterionType === 0" class="reading-wrapper">
       <el-tabs v-model="activeName" v-loading="loading" :before-leave="beforeLeaveCustomize">
         <!-- 阅片 -->
         <el-tab-pane :label="$t('trials:reading:tabTitle:review')" name="read">
@@ -171,6 +174,7 @@
 </template>
 <script>
 import { getNextTask, readClinicalData, verifyDefaultQuestionBeAnswer } from '@/api/trials'
+import VisitReview from './../dicoms3D/components/VisitReview'
 import ReadPage from './components/ReadPage'
 import CustomizeReadPage from './customize/CustomizeReadPage'
 import ReportPage from './components/ReportPage'
@@ -187,6 +191,7 @@ import requestPoolManager from '@/utils/request-pool'
 export default {
   name: 'Reading',
   components: {
+    VisitReview,
     ReadPage,
     ReportPage,
     GlobalReview,
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
new file mode 100644
index 00000000..d2ca6b8d
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -0,0 +1,1787 @@
+<template>
+  <div v-loading="loading" class="read-page-container">
+    <!-- 检查列表 -->
+    <div class="left-panel">
+      <div class="task-container">
+        <div class="task-info">
+          <div
+            v-for="(s, index) in visitTaskList"
+            :key="s.VisitTaskId"
+            class="task-item"
+            :class="{'task-item-active': activeTaskId==s.VisitTaskId}"
+
+            @click.prevent="toggleTask(s, index)"
+          >{{ s.TaskBlindName }}</div>
+        </div>
+      </div>
+      <div class="study-info" v-loading="sLoading">
+        <div
+          v-for="s in visitTaskList"
+          v-show="activeTaskId === s.VisitTaskId"
+          :key="s.VisitTaskId"
+          style="height:100%;"
+        >
+          <study-list
+            v-if="selectArr.includes(s.VisitTaskId) && s.StudyList.length > 0"
+            :ref="s.VisitTaskId"
+            :visit-task-info="s"
+            @activeSeries="activeSeries"
+          />
+
+        </div>
+      </div>
+    </div>
+
+    <!-- 图像 -->
+    <div class="middle-panel">
+      <div class="dicom-viewer">
+        <!-- tools -->
+        <div class="tools-wrapper">
+          <div class="tools-left">
+            <!-- 布局 -->
+            <div class="tool-item" :title="$t('trials:reading:button:layout')">
+              <el-dropdown @command="changeLayout">
+                <span class="el-dropdown-link">
+                  <svg-icon icon-class="layout" class="svg-icon" /><i class="el-icon-arrow-down el-icon--right" />
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="1*1">1*1</el-dropdown-item>
+                  <el-dropdown-item command="1*2">1*2</el-dropdown-item>
+                  <el-dropdown-item command="2*2">2*2</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <!-- 调窗 -->
+            <div 
+              :class="['tool-item', activeTool === 'WindowLevel' ? 'tool-item-active' : '']"
+              :title="$t('trials:reading:button:wwwc')">
+              <el-dropdown @command="changeVoiRange" @click.native="setToolActive('WindowLevel')">
+                <span class="el-dropdown-link">
+                  <svg-icon icon-class="reverse" class="svg-icon" /><i class="el-icon-arrow-down el-icon--right" />
+                </span>
+                <el-dropdown-menu slot="dropdown" style="max-height: 400px;overflow-y: auto;overflow-x: hidden;">
+                  <el-dropdown-item v-for="i in wwwcArr" :command="i" :key="i.label">
+                    <div style="display: flex;justify-content: space-between;width: 220px;">
+                      <div>{{i.label}}</div>
+                      <div v-if="i.ww !== null || i.wc !== null">{{`${i.ww}/${i.wc}`}}</div>
+                    </div>
+                    <el-divider v-if="i.val === 1" class="divider" content-position="center">
+                      {{ ` ${$t('trials:reading:title:preset') }` }}
+                    </el-divider>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <!-- 反色 -->
+            <div
+              class="tool-item"
+              :title="$t('trials:reading:button:reset')"
+              @click.prevent="toggleInvert"
+            >
+              <svg-icon icon-class="reversecolor" class="svg-icon" />
+            </div>
+            <!-- 缩放 -->
+            <div
+              :class="['tool-item', activeTool === 'Zoom' ? 'tool-item-active' : '']"
+              :title="$t('trials:reading:button:zoom')"
+              @click.prevent="setToolActive('Zoom')"
+            >
+              <svg-icon icon-class="magnifier" class="svg-icon" />
+            </div>
+            <!-- 移动 -->
+            <div
+              :class="['tool-item', activeTool === 'Pan' ? 'tool-item-active' : '']"
+              :title="$t('trials:reading:button:move')"
+              @click.prevent="setToolActive('Pan')"
+            >
+              <svg-icon icon-class="move" class="svg-icon" />
+            </div>
+            <!-- 旋转 -->
+            <!-- <div
+              :class="['tool-item', activeTool === 'PlanarRotate' ? 'tool-item-active' : '']"
+              :title="$t('trials:reading:button:rotate')"
+              @click.prevent="setToolActive('PlanarRotate')"
+            >
+              <svg-icon icon-class="rotate" class="svg-icon" />
+            </div> -->
+            <div class="tool-item" :title="$t('trials:reading:button:rotate')">
+              <el-dropdown @command="setViewportRotate">
+                <span class="el-dropdown-link">
+                  <svg-icon icon-class="rotate" class="svg-icon" /><i class="el-icon-arrow-down el-icon--right" />
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="1">
+                    {{$t('trials:reading:button:rotateDefault')}}
+                  </el-dropdown-item>
+                  <el-dropdown-item command="2">
+                    {{$t('trials:reading:button:rotateVertical')}}
+                  </el-dropdown-item>
+                  <el-dropdown-item command="3">
+                    {{$t('trials:reading:button:rotateHorizontal')}}
+                  </el-dropdown-item>
+                  <el-dropdown-item command="4">
+                    {{$t('trials:reading:button:rotateTurnLeft')}}
+                  </el-dropdown-item>
+                  <el-dropdown-item command="5">
+                    {{$t('trials:reading:button:rotateTurnRight')}}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <!-- 适应图像或窗口 -->
+            <div
+              class="tool-item"
+              :title="forceFitToWindow ? `${$t('trials:reading:button:fitWindow')}` : `${$t('trials:reading:button:fitImage')}`"
+              @click.prevent="fitToType(forceFitToWindow)"
+            >
+            <svg-icon v-if="forceFitToWindow" icon-class="fitToWindow" class="svg-icon" />
+            <svg-icon v-else icon-class="fitToImage" class="svg-icon" />
+            </div>
+            <div
+              v-for="tool in tools"
+              :class="['tool-item', readingTaskState === 2 ? 'tool-disabled' : '', activeTool === tool.toolName ? 'tool-item-active' : '']"
+              :title="$t(`${tool.i18nKey}`)"
+              @click.prevent="setAnnotateToolActive(tool.toolName)"
+            >
+              <svg-icon :icon-class="tool.icon" class="svg-icon" />
+            </div>
+
+            <div class="tool-frame">
+              <!-- 第一帧 -->
+              <div :title="$t('trials:dicom-show:firstframe')" class="icon" @click.prevent="scrollPage(0)">
+                <svg-icon icon-class="firstframe" class="svg-icon" />
+              </div>
+              <!-- 上一帧 -->
+              <div :title="$t('trials:dicom-show:previousframe')" class="icon" @click.prevent="scrollPage(-1)">
+                <svg-icon icon-class="previousframe" class="svg-icon" />
+              </div>
+              <!-- 播放/暂停 -->
+              <div 
+                v-if="clipPlaying" 
+                :title="$t('trials:dicom-show:stop')" 
+                class="icon" 
+                @click.prevent="toggleClipPlay(false)"
+              >
+                <svg-icon icon-class="stop" class="svg-icon" />
+              </div>
+              <div 
+                v-else 
+                :title="$t('trials:dicom-show:play')" 
+                class="icon" 
+                @click.prevent="toggleClipPlay(true)"
+              >
+                <svg-icon icon-class="play" class="svg-icon" />
+              </div>
+              <!-- 下一帧 -->
+              <div :title="$t('trials:dicom-show:nextframe')" class="icon" @click.prevent="scrollPage(1)">
+                <svg-icon icon-class="nextframe" class="svg-icon" />
+              </div>
+              <!-- 最后一帧 -->
+              <div :title="$t('trials:dicom-show:lastframe')" class="icon" @click.prevent="scrollPage(99999)">
+                <svg-icon icon-class="lastframe" class="svg-icon" />
+              </div>
+              <select :title="$t('trials:dicom-show:speed')" v-model="fps" class="select-wrapper" :disabled="clipPlaying">
+                <!-- 默认值 -->
+                <option :value="5">5</option>
+                <option :value="10">10</option>
+                <option :value="15">15</option>
+                <option :value="20">20</option>
+                <option :value="25">25</option>
+                <option :value="30">30</option>
+              </select>
+            </div>
+            <!-- 重置 -->
+            <div
+              class="tool-item"
+              :title="$t('trials:reading:button:reset')"
+              @click.prevent="resetViewport"
+            >
+              <svg-icon icon-class="refresh" class="svg-icon" />
+            </div>
+          </div>
+
+          <div>
+            <!-- 手册 -->
+            <el-button 
+              v-if="taskInfo && taskInfo.ExistsManual" 
+              type="text" 
+              @click="previewManuals"
+            >
+              {{ $t('trials:reading:button:handbooks') }}
+            </el-button>
+            <!-- 临床数据 -->
+            <el-button 
+              v-if="taskInfo && taskInfo.IsExistsClinicalData" 
+              type="text" 
+              @click="previewCD(taskInfo.VisitTaskId)"
+            >
+              {{ $t('trials:reading:button:clinicalData') }}
+            </el-button>
+            <!-- 个性化配置 -->
+            <el-button 
+              type="text" 
+              @click="previewConfig"
+            >
+              {{ $t('trials:reading:button:customCfg') }}
+            </el-button>
+          </div>
+        </div>
+        <!-- viewports -->
+        <div class="viewports-wrapper">
+          <div class="grid-container" :style="gridStyle" ref="container">
+            <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}`"
+                :renderingEngineId="renderingEngineId"
+                :viewportId="`viewport-${index}`"
+                :viewportIndex="index"
+                @addHistoryAnnotations="addHistoryAnnotations"
+                @activeViewport="activeViewport"
+                @toggleTaskByViewport="toggleTaskByViewport"
+                @previewCD="previewCD"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 表单 -->
+    <div class="right-panel">
+      <div
+        v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo"
+        class="text-info"
+      >
+        <h3>
+          <span
+            v-if="currentVisitInfo && currentVisitInfo.SubjectCode"
+          >
+            {{ currentVisitInfo.SubjectCode }}
+          </span>
+          <span
+            v-if="currentVisitInfo && currentVisitInfo.TaskBlindName"
+            style="margin-left:5px;"
+          >
+            {{ currentVisitInfo.TaskBlindName }}
+          </span>
+        </h3>
+      </div>
+      <!-- <ecrf-list
+        v-if="currentVisitInfo"
+        :visit-task-info="currentVisitInfo"
+      /> -->
+    </div>
+    <!-- 自定义调窗 -->
+    <el-dialog
+      v-if="customWwc.visible"
+      :visible.sync="customWwc.visible"
+      :close-on-click-modal="false"
+      :title="customWwc.title"
+      width="400px"
+      custom-class="base-dialog-wrapper"
+    >
+      <custom-wwwc-form :ww="activeViewportWW" :wc="activeViewportWC" @close="customWwc.visible = false" @setWwwc="setWwwc" />
+    </el-dialog>
+    <!-- 手册 -->
+    <el-dialog
+      v-if="manualsDialog.visible"
+      :visible.sync="manualsDialog.visible"
+      :custom-class="manualsDialog.isFullscreen?'manuals-full-dialog-container':'manuals-dialog-container'"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :fullscreen="manualsDialog.isFullscreen"
+    >
+      <span slot="title" class="dialog-footer">
+        <!-- 手册 -->
+        <span>{{ $t('trials:reading:button:handbooks') }}</span>
+        <span style="position: absolute;right: 20px;font-size: 20px;">
+          <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" style="margin-right:10px;cursor: pointer;" @click="manualsDialog.isFullscreen=!manualsDialog.isFullscreen" />
+          <svg-icon icon-class="close" style="cursor: pointer;" @click="manualsDialog.visible = false" />
+        </span>
+      </span>
+      <div style="height: 100%;margin:0;">
+        <Manuals :trial-id="trialId" />
+      </div>
+    </el-dialog>
+    <!-- 个性化配置 -->
+    <el-dialog
+      v-if="personalConfigDialog.visible"
+      :visible.sync="personalConfigDialog.visible"
+      :close-on-click-modal="false"
+      :title="personalConfigDialog.title"
+      width="600px"
+    >
+      <el-tabs v-model="personalConfigDialog.activeName" class="personal_config">
+        <!-- 热键 -->
+        <el-tab-pane :label="$t('trials:reading:tab:hotkeys')" name="1">
+          <Hotkeys v-if="personalConfigDialog.activeName === '1'" :reading-tool="0" @reset="resetHotkeyList" />
+        </el-tab-pane>
+        <!-- W/L模板 -->
+        <el-tab-pane :label="$t('trials:reading:tab:wlTemplate')" name="2">
+          <WL v-if="personalConfigDialog.activeName === '2'" @getWwcTpl="getWwcTpl" />
+        </el-tab-pane>
+        <!-- 其他 -->
+        <el-tab-pane :label="$t('trials:reading:tab:others')" name="3">
+          <Others v-if="personalConfigDialog.activeName === '3'" />
+        </el-tab-pane>
+      </el-tabs>
+
+    </el-dialog>
+    <!-- 临床数据 -->
+    <el-dialog
+      :visible.sync="clinicalDataVisible"
+      :custom-class="isClinicalDataFullscreen?'cd-full-dialog-container':'cd-dialog-container'"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :fullscreen="isClinicalDataFullscreen"
+    >
+      <span slot="title" class="dialog-footer">
+        <div style="position: absolute;right: 20px;top: 10px;color: #000;">
+          <svg-icon :icon-class="isClinicalDataFullscreen?'exit-fullscreen':'fullscreen'" 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
+          v-if="clinicalDataVisible"
+          style="flex: 1"
+          :trial-id="trialId"
+          :subject-id="taskInfo.SubjectId"
+          :visit-task-id="cdVisitTaskId"
+          :is-reading-show-subject-info="taskInfo.IsReadingShowSubjectInfo"
+        />
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getRelatedVisitTask, getReadingVisitStudyList, getTableAnswerRowInfoList} from '@/api/trials'
+import { getDoctorShortcutKey, getUserWLTemplateList } from '@/api/user'
+import {
+  RenderingEngine,
+  Enums,
+  imageLoader,
+  metaData,
+  getRenderingEngine,
+  eventTarget,
+  utilities as csUtils
+} from '@cornerstonejs/core'
+import {
+  annotation
+} from '@cornerstonejs/tools'
+import * as cornerstoneTools from '@cornerstonejs/tools'
+import initLibraries from '@/views/trials/trials-panel/reading/dicoms/components/Fusion/js/initLibraries'
+import { getTools } from './toolConfig';
+import StudyList from './StudyList'
+import Viewport from './Viewport'
+import CustomWwwcForm from '@/views/trials/trials-panel/reading/dicoms/components/CustomWwwcForm'
+import Manuals from '@/views/trials/trials-panel/reading/dicoms/components/Manuals'
+import Hotkeys from '@/views/trials/trials-panel/reading/dicoms/components/Hotkeys'
+import WL from '@/views/trials/trials-panel/reading/dicoms/components/WL'
+import Others from '@/views/trials/trials-panel/reading/dicoms/components/Others'
+import ClinicalData from '@/views/trials/trials-panel/reading/clinical-data'
+const { visibility } = annotation;
+const { ViewportType, Events } = Enums
+const renderingEngineId = 'myRenderingEngine'
+const {
+  ToolGroupManager,
+  Enums: csToolsEnums,
+  StackScrollTool,
+  ScaleOverlayTool,
+  PanTool,
+  ZoomTool,
+  WindowLevelTool,
+  WindowLevelRegionTool,
+  PlanarRotateTool,
+  LengthTool,
+  BidirectionalTool,
+  ArrowAnnotateTool,
+  RectangleROITool,
+  PlanarFreehandROITool,
+  EraserTool,
+  // cursors
+} = cornerstoneTools
+const { MouseBindings, Events: toolsEvents } = csToolsEnums
+export default {
+  name:'ReadPage',
+  components: {
+    StudyList,
+    Viewport,
+    CustomWwwcForm,
+    Manuals,
+    Hotkeys,
+    WL,
+    Others,
+    ClinicalData
+  },
+  data(){
+    return {
+      loading: false,
+      trialId: '',
+      visitTaskList: [],
+      selectArr: [],
+      taskInfo: null,
+      activeTaskId: null,
+      activeTaskIndex: -1,
+      activeStudyIndex: -1,
+      activeSeriesIndex: -1,
+      currentVisitInfo: null,
+      layout: '1*2',
+      cellsMax: 4,
+      rows: 1,
+      cols: 1,
+      fullScreenIndex: null,
+      activeViewportIndex: 0,
+      activeTool: '',
+      readingTaskState: 2,
+      renderingEngineId: renderingEngineId,
+      sLoading: false,
+      renderedTaskIds: [],
+      citerionType: null,
+      tools: [],
+      defaultWwwc: [
+        { label: this.$t('trials:reading:button:wwwcDefault'), val: -1, ww: null, wc: null }, // 默认值
+        { label: this.$t('trials:reading:button:wwwcCustom'), val: 0, ww: null, wc: null }, // 自定义
+        { label: this.$t('trials:reading:button:wwwcRegion'), val: 1, ww: null, wc: null }, // 区域窗宽
+        { label: 'CT Brain', wc: 40, ww: 80 },
+        { label: 'CT Lungs', wc: -400, ww: 1500 },
+        { label: 'CT Abdomen', wc: 60, ww: 400 },
+        { label: 'CT Liver', wc: 40, ww: 400 },
+        { label: 'CT Bone', wc: 300, ww: 1500 },
+        { label: 'CT Bone1', wc: 0, ww: 0 }
+      ],
+      wwwcArr: [],
+      customWwc: { visible: false, title: this.$t('trials:reading:dagTitle:wwwcCustom') }, // 自定义调窗
+      personalConfigDialog: { visible: false, title: this.$t('trials:reading:button:customCfg'), activeName: '1' }, // 个性化配置
+      activeViewportWW: null,
+      activeViewportWC: null,
+      clipPlaying: false,
+      fps: 15,
+      manualsDialog: { visible: false, isFullscreen: false },
+      hotKeyList: [],
+      forceFitToWindow: true,
+      isShowAnnotations: true,
+      clinicalDataVisible: false,
+      isClinicalDataFullscreen: false,
+      cdVisitTaskId: ''
+    }
+  },
+  computed: {
+    gridStyle() {
+      return {
+        display: 'grid',
+        gridTemplateRows: `repeat(${this.rows}, 1fr)`,
+        gridTemplateColumns: `repeat(${this.cols}, 1fr)`,
+        height: '100%',
+        width: '100%'
+      }
+    },
+    cellStyle() {
+      return {
+        border: '1px dashed #ccc',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    },
+    cells() {
+      return Array(this.rows * this.cols).fill(0)
+    }
+  },
+  watch: {
+    activeTaskId: {
+      immediate: true,
+      handler(id) {
+        if (!id) return
+        // this.addHistoryAnnotations(id)
+      }
+    },
+    activeViewportIndex: {
+      immediate: true,
+      handler(id) {
+        if (this.$refs[`viewport-${this.activeViewportIndex}`] && this.$refs[`viewport-${this.activeViewportIndex}`][0]) {
+          this.clipPlaying = this.$refs[`viewport-${this.activeViewportIndex}`][0].playClipState
+        } else {
+          this.clipPlaying = false
+          this.fps = 15
+        }
+      }
+    },
+  },
+  mounted() {
+    this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
+    this.citerionType = this.taskInfo.CriterionType
+    this.tools = getTools(this.citerionType)
+    this.trialId = this.$route.query.trialId
+    this.readingTaskState = this.taskInfo.ReadingTaskState
+    if (!this.taskInfo.IsBaseLine && this.taskInfo.IsReadingTaskViewInOrder !== 0) {
+      this.rows = 1
+      this.cols = 2
+      this.activeViewportIndex = 1
+    }
+    
+    this.$nextTick(()=>{
+      this.loadRelatedTasks()
+      this.initLoader()
+      this.getWwcTpl()
+      this.getHotKeys()
+    })
+  },
+  methods: {
+    // 加载当前任务关联的任务信息
+    async loadRelatedTasks() {
+      this.loading = true
+      try {
+        const params = {
+          visitTaskId: this.taskInfo.VisitTaskId
+        }
+        let res = await getRelatedVisitTask(params)
+        let currentTaskIndex = 0
+        let currentTaskId = ''
+        this.visitTaskList = []
+        for (let i = 0; i < res.Result.length; i++) {
+          let item = res.Result[i]
+          let studyList = []
+          let annotations = []
+          let keyImages = []
+          let isInit = false
+          if (item.IsCurrentTask) {
+            currentTaskIndex = i
+            currentTaskId = item.VisitTaskId
+          }
+          if (item.IsCurrentTask || (this.taskInfo.IsReadingTaskViewInOrder === 1 && !this.taskInfo.IsBaseLineTask && item.IsBaseLineTask)) {
+            const res = await this.loadTaskDetails(item, i)
+            isInit = true
+            studyList = res ? res.studyList : []
+            annotations = res ? res.annotations : []
+            keyImages = res ? res.keyImages : []
+            if (!this.selectArr.includes(item.VisitTaskId)) {
+              this.selectArr.push(item.VisitTaskId)
+            }
+          }
+          this.visitTaskList.push({
+            ...item,
+            StudyList: studyList,
+            Annotations: annotations,
+            KeyImages: keyImages,
+            IsInit: isInit
+          })
+        }
+        this.activeTaskId = currentTaskId
+        this.activeTaskIndex = currentTaskIndex
+        this.$nextTick(()=>{
+          this.setInitSeries()
+        })
+        
+        this.loading = false
+      } catch(e) {
+        console.log(e)
+        this.loading = false
+      }
+      
+    },
+    // 加载检查及标注信息
+    async loadTaskDetails(taskInfo, taskIndex) {
+      try {
+        let sujectVisitId = taskInfo.VisitId
+        let taskId = taskInfo.VisitTaskId
+        // 获取检查信息
+        let keyImages = []
+        let res1 = await getReadingVisitStudyList(this.trialId, sujectVisitId, taskId)
+        let keyStudyIndex = -1
+        let keySeriesIndex = -1
+        res1.Result.forEach((study, studyIndex) => {
+          study.SeriesList.forEach((series, seriesIndex) => {
+            const imageIds = [];
+            series
+            series.InstanceInfoList.forEach((instance, instanceIndex) => {
+              if (study.IsCriticalSequence) {
+                keyStudyIndex = studyIndex
+                keySeriesIndex = seriesIndex
+                keyImages.push({Id: instance.Id, Path: instance.Path, KeyFramesList: instance.KeyFramesList, KeyStudyIndex: studyIndex, KeySeriesIndex: seriesIndex})
+              } else {
+                let i = keyImages.findIndex(k=>k.Id === instance.Id)
+                if (i > -1) {
+                  keyImages[i].StudyIndex = studyIndex
+                  keyImages[i].SeriesIndex = seriesIndex
+                }
+                const nFrames = instance.NumberOfFrames || 0;
+                if (nFrames === 0) {
+                  // 单帧
+                  imageIds.push(`wadouri:${this.OSSclientConfig.basePath}${instance.Path}?frame=0&instanceId=${instance.Id}&visitTaskId=${taskId}&idx=${taskIndex}|${studyIndex}|${seriesIndex}`);
+                } else {
+                  // 多帧
+                  for (let frameIndex = 0; frameIndex < nFrames; frameIndex++) {
+                    imageIds.push(`wadouri:${this.OSSclientConfig.basePath}${instance.Path}?frame=${frameIndex}&instanceId=${instance.Id}&visitTaskId=${taskId}&idx=${taskIndex}|${studyIndex}|${seriesIndex}`);
+                  }
+                }
+              }
+            });
+            series.ImageIds = imageIds;
+            series.SliceIndex = 0
+            series.LoadedImageCount = 0
+            series.LoadedImageProgress = 0
+            series.TaskInfo = Object.assign({}, taskInfo)
+            series.StudyIndex = studyIndex
+            series.SeriesIndex = seriesIndex
+          });
+        });
+        if (keyStudyIndex > -1 && keySeriesIndex > -1 && keyImages.length > 0) {
+          let keyImageIds = []
+          keyImages.forEach(instance=>{
+            if (instance.KeyFramesList.length > 0){
+              i.KeyFramesList.map(i => {
+                keyImageIds.push(`wadouri:${this.OSSclientConfig.basePath}${instance.Path}?frame=${i}&instanceId=${instance.Id}&visitTaskId=${taskId}&idx=${taskIndex}|${instance.StudyIndex}|${instance.SeriesIndex}`)
+              })
+            }else {
+              keyImageIds.push(`wadouri:${this.OSSclientConfig.basePath}${instance.Path}?frame=0&instanceId=${instance.Id}&visitTaskId=${taskId}&idx=${taskIndex}|${instance.StudyIndex}|${instance.SeriesIndex}`)
+            }
+            
+          })
+          res1.Result[keyStudyIndex].SeriesList[keySeriesIndex].ImageIds = keyImageIds
+        }
+        // 获取标注信息
+        let res2 = await getTableAnswerRowInfoList(taskId)
+        const annotations = res2.Result.map(i => {
+          if (typeof i.MeasureData === 'string' && i.MeasureData) {
+            i.MeasureData = JSON.parse(i.MeasureData)
+          }
+          return i
+        })
+
+        return {studyList: res1.Result, annotations: annotations, keyImages}
+      } catch(e) {
+        console.log(e)
+      }
+    },
+    // 设置初始化序列信息
+    setInitSeries() {
+      let seriesArr = []
+      let activeStudyIndex = -1
+      let activeSeriesIndex = -1
+      const studyList = this.visitTaskList[this.activeTaskIndex].StudyList.filter(i => i.IsDicom)
+      const seriesList = studyList.map(s => s.SeriesList).flat()
+      if (this.taskInfo.IsReadingTaskViewInOrder === 0) {
+        // 完全随机（默认一个视口，展示第一个序列）
+        let series = this.getRelatedSeries(this.visitTaskList[this.activeTaskIndex])
+        seriesArr.push(series)
+        activeStudyIndex = series.StudyIndex
+        activeSeriesIndex = series.SeriesIndex
+      } else if (this.taskInfo.IsReadingTaskViewInOrder === 1) {
+        // 按时间顺序（默认基线时显示一个视口，展示第一个序列；随访时显示基线和当前随访的序列）
+        if (this.taskInfo.IsBaseLine) {
+          // 基线默认显示第一个序列
+          let series = this.getRelatedSeries(this.visitTaskList[this.activeTaskIndex])
+          seriesArr.push(series)
+          activeStudyIndex = series.StudyIndex
+          activeSeriesIndex = series.SeriesIndex
+        } else {
+          // 随访
+          let i = this.visitTaskList.findIndex(i=>i.IsBaseLineTask)
+          let baseSeries = this.getRelatedSeries(this.visitTaskList[i])
+          seriesArr.push(baseSeries)
+          let followUpSeries = this.getRelatedSeries(this.visitTaskList[this.activeTaskIndex], baseSeries)
+          seriesArr.push(followUpSeries)
+          activeStudyIndex = followUpSeries.StudyIndex
+          activeSeriesIndex = followUpSeries.SeriesIndex
+        }
+
+      } else if (this.taskInfo.IsReadingTaskViewInOrder === 2) {
+        // 受试者内随机（默认两个视口，显示第一个序列和第二个序列；如果只有一个序列则两个视口均显示这个序列）
+        if (seriesList.length === 1) {
+          seriesArr.push(seriesList[0], seriesList[0])
+          activeStudyIndex = seriesList[0].StudyIndex
+          activeSeriesIndex = seriesList[0].SeriesIndex
+        } else if (seriesArr.length > 1) {
+          seriesArr.push(seriesList[0], seriesList[1])
+          activeStudyIndex = seriesList[1].StudyIndex
+          activeSeriesIndex = seriesList[1].SeriesIndex
+        }
+      }
+      
+      if (activeStudyIndex > -1 && activeSeriesIndex > -1) {
+        seriesArr.map((i, index)=>{
+          this.$refs[`viewport-${index}`][0].setSeriesInfo(i)
+        })
+        let visitTaskId = this.visitTaskList[this.activeTaskIndex].VisitTaskId
+        this.$refs[visitTaskId][0].setSeriesActive(activeStudyIndex, activeSeriesIndex)
+      }
+      
+    },
+    // 初始化加载器
+    async initLoader() {
+      await initLibraries()
+
+      let renderingEngine = getRenderingEngine(renderingEngineId)
+      if (!renderingEngine) {
+        renderingEngine = new RenderingEngine(renderingEngineId)
+      }
+      const element1 = this.$refs['viewport-0'][0].$el
+      const element2 = this.$refs['viewport-1'][0].$el
+      const element3 = this.$refs['viewport-2'][0].$el
+      const element4 = this.$refs['viewport-3'][0].$el
+
+      const viewportInputArray = [
+        {
+          viewportId: 'viewport-0',
+          type: ViewportType.STACK,
+          element: element1
+        },
+        {
+          viewportId: 'viewport-1',
+          type: ViewportType.STACK,
+          element: element2
+        },
+        {
+          viewportId: 'viewport-2',
+          type: ViewportType.STACK,
+          element: element3
+        },
+        {
+          viewportId: 'viewport-3',
+          type: ViewportType.STACK,
+          element: element4
+        }
+      ]
+      const viewportIds = ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3']
+      renderingEngine.setViewports(viewportInputArray)
+      this.addAnnotationListeners()
+      cornerstoneTools.addTool(StackScrollTool)
+      cornerstoneTools.addTool(PanTool)
+      cornerstoneTools.addTool(ZoomTool)
+      cornerstoneTools.addTool(WindowLevelTool)
+      cornerstoneTools.addTool(WindowLevelRegionTool)
+      cornerstoneTools.addTool(PlanarRotateTool)
+      cornerstoneTools.addTool(ArrowAnnotateTool)
+      cornerstoneTools.addTool(RectangleROITool)
+      cornerstoneTools.addTool(PlanarFreehandROITool)
+      cornerstoneTools.addTool(EraserTool)
+      cornerstoneTools.addTool(LengthTool)
+      cornerstoneTools.addTool(BidirectionalTool)
+      cornerstoneTools.addTool(ScaleOverlayTool)
+
+      viewportIds.forEach((viewportId, i) => {
+        const toolGroupId = `viewport-${i}`
+        const toolGroup = ToolGroupManager.createToolGroup(toolGroupId)
+        toolGroup.addViewport(viewportId, renderingEngineId)
+        toolGroup.addTool(StackScrollTool.toolName)
+        toolGroup.addTool(ScaleOverlayTool.toolName)
+        
+        toolGroup.addTool(PanTool.toolName)
+        toolGroup.addTool(ZoomTool.toolName)
+        toolGroup.addTool(WindowLevelTool.toolName)
+        toolGroup.addTool(WindowLevelRegionTool.toolName)
+        toolGroup.addTool(PlanarRotateTool.toolName)
+        toolGroup.addTool(ArrowAnnotateTool.toolName, {
+          arrowHeadStyle: 'standard',
+          changeTextCallback: async(data, eventData, doneChangingTextCallback) => {
+            return doneChangingTextCallback(await this.customPrompt())
+          },
+          getTextCallback: async(doneChangingTextCallback) => {
+            return doneChangingTextCallback(await this.customPrompt())
+          }
+        })
+        toolGroup.addTool(RectangleROITool.toolName, {
+          cachedStats: false,
+          getTextLines: this.getRectangleROIToolTextLines
+        })
+        toolGroup.addTool(PlanarFreehandROITool.toolName, {
+          allowOpenContours: false,
+          cachedStats: false,
+          getTextLines: this.getPlanarFreehandROIToolTextLines
+        })
+
+        toolGroup.addTool(EraserTool.toolName)
+        toolGroup.addTool(LengthTool.toolName, {
+          getTextLines: this.getLengthToolTextLines,
+          cachedStats: false
+        })
+        toolGroup.addTool(BidirectionalTool.toolName, {
+          // getTextLines: this.getLengthToolTextLines,
+        })
+        
+        
+
+        toolGroup.setToolActive(StackScrollTool.toolName, {
+          bindings: [{ mouseButton: MouseBindings.Wheel }]
+        })
+        // toolGroup.setToolEnabled(ScaleOverlayTool.toolName);
+        toolGroup.setToolPassive(PanTool.toolName)
+        toolGroup.setToolPassive(ZoomTool.toolName)
+        toolGroup.setToolPassive(WindowLevelTool.toolName)
+        toolGroup.setToolPassive(WindowLevelRegionTool.toolName)
+        toolGroup.setToolPassive(PlanarRotateTool.toolName)
+        
+        if (this.readingTaskState < 2) {
+          toolGroup.setToolPassive(ArrowAnnotateTool.toolName)
+          toolGroup.setToolPassive(RectangleROITool.toolName)
+          toolGroup.setToolPassive(PlanarFreehandROITool.toolName)
+          toolGroup.setToolPassive(LengthTool.toolName)
+          toolGroup.setToolPassive(BidirectionalTool.toolName)
+        } else {
+          toolGroup.setToolEnabled(ArrowAnnotateTool.toolName)
+          toolGroup.setToolEnabled(RectangleROITool.toolName)
+          toolGroup.setToolEnabled(PlanarFreehandROITool.toolName)
+          toolGroup.setToolEnabled(LengthTool.toolName)
+          toolGroup.setToolEnabled(BidirectionalTool.toolName)
+        }
+        toolGroup.setToolPassive(EraserTool.toolName)
+      })
+      
+      eventTarget.addEventListener('cornerstoneimageloadprogress', this.imageLoadProgress)
+      console.log(Events)
+    },
+    // 影像下载进度回调
+    imageLoadProgress(e) {
+      const {detail} = e
+      const percentComplete = detail.percentComplete
+      const imageId = detail.imageId
+      const params = this.getInstanceInfo(imageId)
+      if (!params.hasOwnProperty('idx')) return
+      const indexArr = params.idx.split('|')
+      if (indexArr.length < 3) return
+      const taskIndex = parseInt(indexArr[0])
+      const studyIndex = parseInt(indexArr[1])
+      const seriesIndex = parseInt(indexArr[2])
+      const isCriticalSequence  = this.visitTaskList[taskIndex].StudyList[studyIndex].IsCriticalSequence
+      const keyImages = this.visitTaskList[taskIndex].KeyImages
+      const series = this.visitTaskList[taskIndex].StudyList[studyIndex].SeriesList[seriesIndex]
+      this.setImageLoadedProgress(series, percentComplete)
+      if (!isCriticalSequence && series.IsBeMark && keyImages.length > 0) {
+        let i = keyImages.findIndex(i=>i.Id = params.instanceId)
+        if (i === -1) return
+        let keyStudyIndex = parseInt(keyImages[i].KeyStudyIndex)
+        let keySeriesIndex = parseInt(keyImages[i].KeySeriesIndex)
+        let keySeries = this.visitTaskList[taskIndex].StudyList[keyStudyIndex].SeriesList[keySeriesIndex]
+        this.setImageLoadedProgress(keySeries, percentComplete)
+      }
+    },
+    // 设置图像下载进度信息
+    setImageLoadedProgress(series, percentComplete) {
+      let instanceCount = series.InstanceCount
+      let loadedImageProgress = series.LoadedImageProgress
+      let loadedImageCount = series.LoadedImageCount
+      if (percentComplete === 100) {
+        ++loadedImageCount
+        this.$set(series, 'LoadedImageCount', loadedImageCount);
+      }
+      loadedImageProgress = (loadedImageProgress * instanceCount + percentComplete) / instanceCount
+      this.$set(series, 'LoadedImageProgress', loadedImageProgress);
+    },
+    addHistoryAnnotations(taskId) {
+      if (this.renderedTaskIds.includes(taskId)) return
+      this.renderedTaskIds.push(taskId)
+      let i = this.visitTaskList.findIndex(i=>i.VisitTaskId === taskId)
+      if (i=== -1) return
+      const annotations = this.visitTaskList[i].Annotations
+      annotations.map(i => {
+        const annotation = i.MeasureData.data
+        annotation.annotationId = i.Id
+        cornerstoneTools.annotation.state.addAnnotation(annotation)
+        if (this.visitTaskList[i].ReadingTaskState === 2) {
+          cornerstoneTools.annotation.locking.setAnnotationLocked(annotation.annotationUID)
+        }
+      })
+    },
+    addAnnotationListeners() {
+      const debouncedCallback = this.debounce((evt) => {
+        this.annotationModifiedListener(evt)
+      }, 100)
+      eventTarget.addEventListener(
+        toolsEvents.ANNOTATION_MODIFIED,
+        (evt) => {
+          debouncedCallback(evt)
+        }
+      )
+      eventTarget.addEventListener(
+        toolsEvents.ANNOTATION_COMPLETED,
+        this.annotationCompletedListener
+      )
+      eventTarget.addEventListener(
+        toolsEvents.ANNOTATION_REMOVED,
+        this.annotationRemovedListener
+      )
+    },
+    annotationCompletedListener(e) {
+      console.log('Completed')
+      if (this.readingTaskState === 2) return
+      const { annotation } = e.detail
+      if (!annotation) return
+      if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
+      let series = this.$refs[`viewport-${this.activeViewportIndex}`][0].series
+      if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
+
+      }
+    },
+    annotationModifiedListener(e) {
+
+    },
+    annotationRemovedListener(e) {
+
+    },
+    getLengthToolTextLines(data, targetId) {
+      const cachedVolumeStats = data.cachedStats[targetId]
+      const { length, unit } = cachedVolumeStats
+      if (length === undefined || length === null || isNaN(length)) {
+        return
+      }
+      const textLines = [`${parseFloat(length).toFixed(this.digitPlaces)} ${unit}`];
+      return textLines
+    },
+    getPlanarFreehandROIToolTextLines(data, targetId) {
+      const cachedVolumeStats = data.cachedStats[targetId]
+      const {
+        area,
+        mean,
+        stdDev,
+        // length,
+        perimeter,
+        max,
+        isEmptyArea,
+        unit,
+        areaUnit,
+        modalityUnit
+      } = cachedVolumeStats || {}
+
+      const textLines = []
+
+      if (area) {
+        const areaLine = isEmptyArea
+          ? `Area: Oblique not supported`
+          : `Area: ${parseFloat(area).toFixed(this.digitPlaces)} ${areaUnit}`
+        textLines.push(areaLine)
+      }
+      if (mean) {
+        textLines.push(`Mean: ${parseFloat(mean).toFixed(this.digitPlaces)} ${modalityUnit}`)
+      }
+
+      if (Number.isFinite(max)) {
+        textLines.push(`Max: ${csUtils.roundNumber(max)} ${modalityUnit}`)
+      }
+
+      if (stdDev) {
+        textLines.push(`Std Dev: ${csUtils.roundNumber(stdDev)} ${modalityUnit}`)
+      }
+
+      if (perimeter) {
+        textLines.push(`Perimeter: ${parseFloat(perimeter).toFixed(this.digitPlaces)} ${unit}`)
+      }
+
+      // if (length) {
+      //   // No need to show length prefix as there is just the single value
+      //   textLines.push(`${csUtils.roundNumber(length)} ${unit}`);
+      // }
+
+      return textLines
+    },
+    getRectangleROIToolTextLines(data, targetId) {
+      const cachedVolumeStats = data.cachedStats[targetId]
+      const { area, mean, max, stdDev, areaUnit, modalityUnit } = cachedVolumeStats
+
+      if (mean === undefined) {
+        return
+      }
+
+      const textLines = []
+      
+      textLines.push(`Area: ${parseFloat(area).toFixed(this.digitPlaces)} ${areaUnit}`)
+
+      textLines.push(`Mean: ${csUtils.roundNumber(mean)} ${modalityUnit}`)
+      textLines.push(`Max: ${csUtils.roundNumber(max)} ${modalityUnit}`)
+      textLines.push(`Std Dev: ${csUtils.roundNumber(stdDev)} ${modalityUnit}`)
+
+      return textLines
+    },
+    // 激活工具
+    setToolActive(toolName) {
+      const toolGroupId = `viewport-${this.activeViewportIndex}`
+      const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
+      if (this.activeTool === toolName) {
+        toolGroup.setToolPassive(this.activeTool)
+        this.activeTool = ''
+      } else {
+        if (this.activeTool) {
+          toolGroup.setToolPassive(this.activeTool)
+        }
+        toolGroup.setToolActive(toolName, {
+          bindings: [{ mouseButton: MouseBindings.Primary }]
+        })
+        this.activeTool = toolName
+      }
+    },
+    // 激活标注工具
+    setAnnotateToolActive(toolName) {
+      if (this.readingTaskState === 2) return
+      let series = this.$refs[`viewport-${this.activeViewportIndex}`][0].series
+      if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
+        const toolGroupId = `viewport-${this.activeViewportIndex}`
+        const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
+        if (this.activeTool === toolName) {
+          toolGroup.setToolPassive(this.activeTool)
+          this.activeTool = ''
+        } else {
+          if (this.activeTool) {
+            toolGroup.setToolPassive(this.activeTool)
+          }
+          toolGroup.setToolActive(toolName, {
+            bindings: [{ mouseButton: MouseBindings.Primary }]
+          })
+          this.activeTool = toolName
+        }
+      }
+    },
+
+    setToolsPassive() {
+      if (!this.activeTool) return
+      const toolGroupIds = ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3']
+      toolGroupIds.forEach(toolGroupId => {
+        const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
+        toolGroup.setToolPassive(this.activeTool)
+      })
+      this.activeTool = ''
+    },
+    // 旋转视口
+    setViewportRotate(value) {
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewportId = `viewport-${this.activeViewportIndex}`
+      const viewport = (renderingEngine.getViewport(viewportId))
+      const type = parseInt(value)
+      // 1：默认值；2：垂直翻转；3：水平翻转；4：左转90度；5：右转90度；
+      if (type === 1) {
+        viewport.resetCamera();
+        viewport.resetProperties();
+        viewport.render();
+      } else if (type === 2) {
+        const  { flipVertical } = viewport.getCamera();
+        viewport.setCamera({ flipVertical: !flipVertical });
+        viewport.render();
+      } else if (type === 3) {
+        const { flipHorizontal } = viewport.getCamera();
+        viewport.setCamera({ flipHorizontal: !flipHorizontal });
+        viewport.render();
+      } else if (type === 4) {
+        const { rotation } = viewport.getViewPresentation();
+        viewport.setViewPresentation({ rotation: rotation + 90 });
+        viewport.render();
+      } else if (type === 5) {
+        const { rotation } = viewport.getViewPresentation();
+        viewport.setViewPresentation({ rotation: rotation - 90 });
+        viewport.render();
+      }
+      this.$refs[`viewport-${this.activeViewportIndex}`][0].rotateOrientationMarkers(type)
+    },
+    // 重置视口
+    resetViewport() {
+      this.setToolsPassive()
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewportId = `viewport-${this.activeViewportIndex}`
+      const viewport = (renderingEngine.getViewport(viewportId))
+      this.$refs[`viewport-${this.activeViewportIndex}`][0].resetOrientationMarkers()
+      viewport.resetCamera({ resetPan: true, resetZoom: true, resetToCenter: true })
+      renderingEngine.render()
+    },
+    // 更改视图布局
+    changeLayout(v) {
+      this.fullScreenIndex = null
+      this.layout = v
+      this.rows = parseInt(v.split('*')[0])
+      this.cols = parseInt(v.split('*')[1])
+    },
+    // 更改窗宽窗位
+    changeVoiRange(v) {
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewportId = `viewport-${this.activeViewportIndex}`
+      const viewport = (renderingEngine.getViewport(viewportId))
+      if (v.val === -1) {
+        // 默认值
+        viewport.resetProperties();
+        viewport.render();
+      } else if (v.val === 0) {
+        // 自定义
+        let wwwc = this.$refs[`viewport-${this.activeViewportIndex}`][0].imageInfo.wwwc
+        this.activeViewportWW = wwwc ? parseInt(wwwc.split('/')[0]) : null
+        this.activeViewportWC = wwwc ? parseInt(wwwc.split('/')[1]) : null
+        this.customWwc.visible = true
+      } else if (v.val === 1) {
+        // 区域窗宽窗位
+        this.setToolActive('WindowLevelRegion')
+      } else {
+        const lower = v.wc - v.ww / 2;
+        const upper = v.wc + v.ww / 2 - 1;
+        viewport.setProperties({ voiRange: { upper: upper, lower: lower } });
+        viewport.render();
+      }
+    },
+    setWwwc(v) {
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewportId = `viewport-${this.activeViewportIndex}`
+      const viewport = (renderingEngine.getViewport(viewportId))
+      const lower = v.wc - v.ww / 2;
+      const upper = v.wc + v.ww / 2 - 1;
+      viewport.setProperties({ voiRange: { upper: upper, lower: lower } });
+      viewport.render();
+      this.customWwc.visible = false
+    },
+    toggleInvert() {
+      const renderingEngine = getRenderingEngine(renderingEngineId);
+      const viewport = renderingEngine.getViewport(`viewport-${this.activeViewportIndex}`);
+      const { invert } = viewport.getProperties();
+      viewport.setProperties({ invert: !invert });
+      viewport.render();
+    },
+    scrollPage(type) {
+      this.$refs[`viewport-${this.activeViewportIndex}`][0].scrollPage(type)
+    },
+    toggleClipPlay(isPlay) {
+      this.clipPlaying = !this.clipPlaying
+      this.$refs[`viewport-${this.activeViewportIndex}`][0].toggleClipPlay(isPlay, this.fps)
+    },
+    async getWwcTpl() {
+      try {
+        const res = await getUserWLTemplateList()
+        let customWwcTpl = []
+        res.Result.map(i => {
+          customWwcTpl.push({ label: i.TemplateName, wc: i.WL, ww: i.WW })
+        })
+        this.wwwcArr = [...this.defaultWwwc, ...customWwcTpl]
+      } catch(e) {
+        console.log(e)
+      }
+    },
+    async getHotKeys() {
+      try {
+        const res = await getDoctorShortcutKey({ imageToolType: 0 })
+        res.Result.map(item => {
+          this.hotKeyList.push({ id: item.Id, altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code, text: item.Text, shortcutKeyEnum: item.ShortcutKeyEnum })
+        })
+        this.bindHotKey()
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    bindHotKey() {
+      const container = this.$refs['container']
+      container.addEventListener('keydown', event => {
+        event.preventDefault()
+        var idx = this.hotKeyList.findIndex(i => i.code === event.code && i.ctrlKey === event.ctrlKey && i.shiftKey === event.shiftKey && i.altKey === event.altKey)
+        if (idx === -1) return
+        var shortcutKeyEnum = this.hotKeyList[idx].shortcutKeyEnum
+
+        if (shortcutKeyEnum === 1) {
+          // 前一图像视口
+          let viewportIndex = this.activeViewportIndex === 0 ? this.activeViewportIndex : this.activeViewportIndex - 1
+          this.activeViewport(viewportIndex)
+        } else if (shortcutKeyEnum === 2) {
+          // 后一图像视口
+          let viewportIndex = this.activeViewportIndex === this.cells.length - 1 ? this.activeViewportIndex : this.activeViewportIndex + 1
+          this.activeViewport(viewportIndex)
+        } else if (shortcutKeyEnum === 3) {
+          // 上一个序列
+          const series = this.$refs[`viewport-${this.activeViewportIndex}`][0].series
+          this.$refs[this.activeTaskId][0].getPreviousOrNextSeries(-1, series)
+        } else if (shortcutKeyEnum === 4) {
+          // 下一个序列
+          const series = this.$refs[`viewport-${this.activeViewportIndex}`][0].series
+          this.$refs[this.activeTaskId][0].getPreviousOrNextSeries(1, series)
+        } else if (shortcutKeyEnum === 5) {
+          // 上一张图像
+          this.$refs[`viewport-${this.activeViewportIndex}`][0].scrollPage(-1)
+        } else if (shortcutKeyEnum === 6) {
+          // 下一张图像
+          this.$refs[`viewport-${this.activeViewportIndex}`][0].scrollPage(1)
+        } else if (shortcutKeyEnum === 7) {
+          // 向左旋转
+          this.setViewportRotate(4)
+        } else if (shortcutKeyEnum === 8) {
+          // 向右旋转
+          this.setViewportRotate(5)
+        } else if (shortcutKeyEnum === 9) {
+          // 水平翻转
+          this.setViewportRotate(3)
+        } else if (shortcutKeyEnum === 10) {
+          // 垂直翻转
+          this.setViewportRotate(2)
+        } else if (shortcutKeyEnum === 11) {
+          // 放大
+          this.$refs[`viewport-${this.activeViewportIndex}`][0].setZoom(1)
+        } else if (shortcutKeyEnum === 12) {
+          // 缩小
+          this.$refs[`viewport-${this.activeViewportIndex}`][0].setZoom(-1)
+        } else if (shortcutKeyEnum === 13) {
+          // 适应图像
+          this.$refs[`viewport-${this.activeViewportIndex}`][0].resize(false)
+        } else if (shortcutKeyEnum === 14) {
+          // 适应窗口
+          this.$refs[`viewport-${this.activeViewportIndex}`][0].resize(true)
+        } else if (shortcutKeyEnum === 15) {
+          // 截图
+        } else if (shortcutKeyEnum === 16) {
+          // 反色
+          this.toggleInvert()
+        } else if (shortcutKeyEnum === 17) {
+          // 窗宽/窗位
+          let wwwcIdx = this.$refs[`viewport-${this.activeViewportIndex}`][0].wwwcIdx
+          let newWwwcIdx = wwwcIdx === this.wwwcArr.length -1 ? 3 : wwwcIdx + 1
+          const wwwcTpl = this.wwwcArr[newWwwcIdx]
+          this.changeVoiRange(wwwcTpl)
+          this.$refs[`viewport-${this.activeViewportIndex}`][0].setWwwcIdx(newWwwcIdx)
+        } else if (shortcutKeyEnum === 18) {
+          // 重置
+          this.resetViewport()
+        } else if (shortcutKeyEnum === 19) {
+          // 显示或隐藏标记
+          this.isShowAnnotations = !this.isShowAnnotations
+          if (this.isShowAnnotations) {
+            visibility.showAllAnnotations();
+          } else {
+            const annotationsUIDs = annotation.state.getAllAnnotations().map((a) => a.annotationUID);
+            annotationsUIDs.forEach((annotationUID) => {
+              visibility.setAnnotationVisibility(annotationUID, false);
+            });
+          }
+          const renderingEngine = getRenderingEngine(renderingEngineId);
+          const viewportIds = ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3']
+          renderingEngine.renderViewports(viewportIds);
+        }
+      })
+    },
+    resetHotkeyList(arr) {
+      this.hotKeyList = []
+      arr.map(item => {
+        this.hotKeyList.push({ id: item.id, altKey: item.keys.controlKey.altKey, ctrlKey: item.keys.controlKey.ctrlKey, shiftKey: item.keys.controlKey.shiftKey, metaKey: item.keys.controlKey.metaKey, key: item.keys.controlKey.key, code: item.keys.controlKey.code, text: item.keys.text, shortcutKeyEnum: item.label })
+      })
+    },
+    fitToType(forceFitToWindow) {
+      this.$refs[`viewport-${this.activeViewportIndex}`][0].resize(forceFitToWindow)
+      this.forceFitToWindow = !forceFitToWindow
+    },
+    // 切换全屏
+    toggleFullScreen(e, index) {
+      this.fullScreenIndex = this.fullScreenIndex === index ? null : index
+      this.activeViewportIndex = index
+    },
+    async toggleTask(taskInfo, taskIndex) {
+      if (taskIndex === this.activeTaskIndex) return
+      if (!this.selectArr.includes(taskInfo.VisitTaskId)) {
+        this.selectArr.push(taskInfo.VisitTaskId)
+      }
+      this.activeTaskId = taskInfo.VisitTaskId
+      this.activeTaskIndex = taskIndex
+      if (!taskInfo.IsInit) {
+        this.sLoading = true
+        try {
+          const res = await this.loadTaskDetails(taskInfo, taskIndex)
+          const studyList = res ? res.studyList : []
+          const annotations = res ? res.annotations : []
+          const keyImages = res ? res.keyImages : []
+          this.$set(taskInfo, 'StudyList', studyList)
+          this.$set(taskInfo, 'Annotations', annotations)
+          this.$set(taskInfo, 'KeyImages', keyImages)
+          this.$set(taskInfo, 'IsInit', true)
+          this.sLoading = false
+        } catch(e) {
+          this.sLoading = false
+        }
+      }
+    },
+    async toggleTaskByViewport(obj) {
+      const i = this.visitTaskList.findIndex(v => v.VisitTaskNum === obj.visitTaskNum)
+      if (i === -1) return
+      this.activeTaskId = this.visitTaskList[i].VisitTaskId
+      this.activeTaskIndex = i
+      if (!this.selectArr.includes(this.activeTaskId)) {
+        this.selectArr.push(this.activeTaskId)
+      }
+      if (!this.visitTaskList[i].IsInit) {
+        this.sLoading = true
+        try {
+          const res = await this.loadTaskDetails(this.visitTaskList[i], i)
+          const studyList = res ? res.studyList : []
+          const annotations = res ? res.annotations : []
+          const keyImages = res ? res.keyImages : []
+          this.$set(this.visitTaskList[i], 'StudyList', studyList)
+          this.$set(this.visitTaskList[i], 'Annotations', annotations)
+          this.$set(this.visitTaskList[i], 'KeyImages', keyImages)
+          this.$set(this.visitTaskList[i], 'IsInit', true)
+          this.sLoading = false
+        } catch(e) {
+          this.sLoading = false
+        }
+      }
+      let series = this.getRelatedSeries(this.visitTaskList[i], obj.series)
+      this.$nextTick(()=>{
+        this.$refs[`viewport-${this.activeViewportIndex}`][0].setSeriesInfo(series)
+        this.$refs[this.activeTaskId][0].setSeriesActive(series.StudyIndex, series.SeriesIndex)
+      })
+    },
+    async activeSeries(obj) {
+      this.$refs[`viewport-${this.activeViewportIndex}`][0].setSeriesInfo(obj)
+      this.clipPlaying = false
+      this.fps = 15
+    },
+    // 激活视口
+    activeViewport(index) {
+      if (this.activeViewportIndex === index) return
+      this.activeViewportIndex = index
+      if (index === this.cells.length - 1) {
+        // store.dispatch('noneDicomReview/setLastViewportTaskId', this.viewportInfos[i].taskInfo.VisitTaskId)
+      }
+      // 切换检查列表
+      let series =this.$refs[`viewport-${this.activeViewportIndex}`][0].series
+      if (series) {
+        let i = this.visitTaskList.findIndex(v => v.VisitTaskId === series.TaskInfo.VisitTaskId)
+        if (i > -1) {
+          this.activeTaskId = series.TaskInfo.VisitTaskId
+          this.activeTaskIndex = i
+          this.$refs[series.TaskInfo.VisitTaskId][0].setSeriesActive(series.StudyIndex, series.SeriesIndex)
+        }
+      }
+      this.setToolsPassive()
+    },
+    getRelatedSeries(visitTaskInfo, baselineSeries) {
+      let obj = {}
+      let studyList = visitTaskInfo.StudyList
+      let annotations = visitTaskInfo.Annotations
+      if (baselineSeries) {
+        let seriesList = studyList.map(s => s.IsDicom && s.SeriesList).flat()
+        if (baselineSeries.IsMarked) {
+          let i = annotations.findIndex(i => Object.keys(i.MeasureData).length > 0 && i.OrderMarkName === baselineSeries.MeasureData.OrderMarkName)
+          if (i > -1) {
+            obj = this.getMarkedSeries(studyList, annotations[i])
+          }
+        }
+        if (Object.keys(obj).length === 0) {
+          // 筛选描述相似
+          let similarArr = seriesList.map((i, index) => {
+            return { similar: this.strSimilarity2Percent(i.Description, baselineSeries.Description), index }
+          })
+          similarArr = similarArr.sort((a, b) => {
+            return b.similar - a.similar
+          })
+          let idx = similarArr[0] && similarArr[0].similar > 0.85 ? similarArr[0].index : -1
+          if (idx > -1) {
+            obj = Object.assign({}, seriesList[idx])
+            let imageIds = seriesList[idx].ImageIds
+            let sliceIdx = Math.floor(imageIds.length / 2)
+            obj.SliceIndex = sliceIdx > 0 ? sliceIdx - 1 : 0
+          }
+        }
+        if (Object.keys(obj).length === 0) {
+          // 筛选层厚一致
+          let idx = seriesList.findIndex(series => series.InstanceCount === baselineSeries.InstanceCount)
+          if (idx > -1) {
+            obj = Object.assign({}, seriesList[idx])
+            let imageIds = seriesList[idx].ImageIds
+            let sliceIdx = Math.floor(imageIds.length / 2)
+            obj.SliceIndex = sliceIdx > 0 ? sliceIdx - 1 : 0
+          }
+        }
+        if (Object.keys(obj).length === 0) {
+          // 筛选层厚为5的序列
+          let idx = seriesList.findIndex(series => series.IsDicom && parseInt(series.SliceThickness) === 5)
+          if (idx > -1) {
+            obj = Object.assign({}, seriesList[idx])
+            let imageIds = seriesList[idx].ImageIds
+            let sliceIdx = Math.floor(imageIds.length / 2)
+            obj.SliceIndex = sliceIdx > 0 ? sliceIdx - 1 : 0
+          }
+        }
+      } else {
+        let i = annotations.findIndex(a => Object.keys(a.MeasureData).length > 0)
+        if (i > -1) {
+          // 有标记时，显示带标记影像所在序列
+          obj = this.getMarkedSeries(studyList, annotations[i])
+        } else {
+          for (let k = 0; k < studyList.length; k++) {
+            let seriesIdx = studyList[k].SeriesList.findIndex(s => s.SliceThickness && parseInt(s.SliceThickness) === 5)
+            if (seriesIdx > -1) {
+              obj = Object.assign({}, studyList[k].SeriesList[seriesIdx])
+              let imageIds = studyList[k].SeriesList[seriesIdx].ImageIds
+              let sliceIdx = Math.floor(imageIds.length / 2)
+              obj.SliceIndex = sliceIdx > 0 ? sliceIdx - 1 : 0
+              obj.IsMarked = false
+              break
+            }
+          }
+        }
+      }
+      if (Object.keys(obj).length === 0) {
+        let sIdx = studyList.findIndex(s => s.IsDicom)
+        if (sIdx > -1) {
+          obj = Object.assign({}, studyList[sIdx].SeriesList[0])
+          let imageIds = studyList[sIdx].SeriesList[0].ImageIds
+          let sliceIdx = Math.floor(imageIds.length / 2)
+          obj.SliceIndex = sliceIdx > 0 ? sliceIdx - 1 : 0
+          obj.IsMarked = false
+        }
+      }
+      return obj
+    },
+    getMarkedSeries(studyList, annotation) {
+      let obj = {}
+      let sIdx = studyList.findIndex(s => s.StudyId === annotation.StudyId)
+      if (sIdx > -1) {
+        let seriesList = studyList[sIdx].SeriesList
+        let seriesIdx = seriesList.findIndex(s => s.SeriesId === annotation.SeriesId)
+        if (seriesIdx > -1) {
+          let instanceIdx = seriesList[seriesIdx].InstanceInfoList.findIndex(i=>i.Id === annotation.InstanceId)
+          let filterStr = ''
+          if (instanceIdx > -1 && seriesList[seriesIdx].IsExistMutiFrames) {
+            if (seriesList[seriesIdx].InstanceInfoList[instanceIdx].NumberOfFrames > 0) {
+              filterStr = `frame=${annotation.MeasureData.frame}&instanceId=${annotation.InstanceId}`
+            } else {
+              filterStr = `instanceId=${annotation.InstanceId}`
+            }
+          } else {
+            filterStr = `instanceId=${annotation.InstanceId}`
+          }
+          let imageIds = seriesList[seriesIdx].ImageIds
+          let imageIdIdx = imageIds.findIndex(is => is.includes(filterStr))
+          if (imageIdIdx) {
+            obj = Object.assign({}, seriesList[seriesIdx])
+            obj.SliceIndex = imageIdIdx
+            obj.IsMarked = true
+            obj.MeasureData = annotation
+          }
+        }
+      }
+      return obj
+    },
+    // 两个字符串的相似程度，并返回相似度百分比
+    strSimilarity2Percent(s, t) {
+      var l = s.length > t.length ? s.length : t.length
+      var d = this.strSimilarity2Number(s, t)
+      return Number((1 - d / l).toFixed(4))
+    },
+    strSimilarity2Number(s, t) {
+      var n = s.length; var m = t.length; var d = []
+      var i, j, s_i, t_j, cost
+      if (n === 0) return m
+      if (m === 0) return n
+      for (i = 0; i <= n; i++) {
+        d[i] = []
+        d[i][0] = i
+      }
+      for (j = 0; j <= m; j++) {
+        d[0][j] = j
+      }
+      for (i = 1; i <= n; i++) {
+        s_i = s.charAt(i - 1)
+        for (j = 1; j <= m; j++) {
+          t_j = t.charAt(j - 1)
+          if (s_i === t_j) {
+            cost = 0
+          } else {
+            cost = 1
+          }
+          d[i][j] = this.Minimum(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost)
+        }
+      }
+      return d[n][m]
+    },
+    Minimum(a, b, c) {
+      return a < b ? (a < c ? a : c) : (b < c ? b : c)
+    },
+    // 手册
+    previewManuals() {
+      this.manualsDialog.isFullscreen = false
+      this.manualsDialog.visible = true
+    },
+    // 临床数据
+    previewCD(taskId) {
+      this.isClinicalDataFullscreen = false
+      this.dialogVisible = true
+      this.cdVisitTaskId = taskId
+      this.clinicalDataVisible = true
+    },
+    // 个性化配置
+    previewConfig() {
+      this.personalConfigDialog.activeName = '1'
+      this.personalConfigDialog.visible = true
+    },
+    getInstanceInfo(imageId) {
+      const params = {}
+      const searchParams = new URLSearchParams(imageId.split('?')[1])
+      for (const [key, value] of searchParams.entries()) {
+        params[key] = value
+      }
+      if (isNaN(params.frame)) {
+        params.frame = 0
+      }
+      return params
+    },
+    // 箭头工具输入标记名称自定义弹窗
+    async customPrompt() {
+      try {
+        // 请输入标记名称
+        const { value } = await this.$prompt(this.$t('trials:noneDicom:message:msg1'))
+        return value
+      } catch {
+        return null
+      }
+    },
+
+    debounce(callback, delay) {
+      let timerId
+      return function() {
+        clearTimeout(timerId)
+        timerId = setTimeout(() => {
+          callback.apply(this, arguments)
+        }, delay)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .read-page-container {
+    box-sizing: border-box;
+    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;
+      user-select: none;
+      ::-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;
+      user-select: none;
+      .dicom-viewer {
+        display: flex;
+        flex-direction: column;
+        width:100%;
+        height: 100%;
+        user-select: none;
+        .tools-wrapper {
+          height: 50px;
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid #727272;
+          color: #ddd;
+          padding: 0 5px;
+          .tools-left {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+          }
+          .tool-item {
+            padding: 5px;
+            margin: 0 5px;
+            border: 1px solid #333;
+            font-size: 20px;
+            cursor: pointer;
+            .el-dropdown-link {
+              .svg-icon {
+                color: #ddd;
+                font-size: 20px;
+              }
+            }
+            .divider{
+              display: block;
+              height: 1px;
+              width: 100%;
+              margin: 10px 0;
+            }
+            .el-divider__text{
+              padding: 0 10px;
+              // color: #fff;
+              // background-color: #383838;
+              font-size: 12px;
+              width: 80px;
+            }
+          }
+          .tool-item-active {
+            background-color: #607d8b;
+          }
+          .tool-disabled {
+            cursor: not-allowed;
+          }
+          .tool-frame{
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            // margin-right: 20px;
+            padding: 1px;
+            margin: 0 5px;
+            border: 1px solid #404040;
+            .icon{
+              padding: 5px;
+              border-right: 1px solid #404040;
+              cursor: pointer;
+              text-align: center;
+              .svg-icon{
+                font-size:20px;
+                color:#ddd;
+              }
+            }
+            .select-wrapper{
+              width: 60px;
+              background-color: black;
+              color: #ddd;
+              border: none;
+              font-size: 13px;
+              outline: none;
+            }
+            .text{
+              position: relative;
+              font-size: 12px;
+              margin-top: 5px;
+              color: #d0d0d0;
+              display: none;
+            }
+          }
+        }
+        .viewports-wrapper {
+          flex: 1;
+          .grid-container {
+            display: grid;
+            height: 100%;
+            width: 100%;
+            position: relative;
+          }
+
+          .grid-cell {
+            border: 1px dashed #ccc;;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .cell_active {
+            border-color: #fafa00!important;
+          }
+          .cell-full-screen {
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+          }
+        }
+      }
+    }
+    .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;
+      }
+    }
+    .personal_config {
+      ::v-deep .el-tabs__content{
+        height: 450px;
+        overflow-y: auto;
+      }
+    }
+    ::v-deep .manuals-dialog-container{
+      margin-top: 50px !important;
+      width:75%;
+      height:80%;
+      .el-dialog__body{
+        padding: 10px;
+        height: calc(100% - 50px) !important;
+      }
+      .el-dialog__header{
+        position: relative;
+      }
+    }
+    ::v-deep .manuals-full-dialog-container{
+      .el-dialog__body{
+        padding: 10px;
+        height: calc(100% - 50px) !important;
+      }
+      .el-dialog__header{
+        position: relative;
+      }
+    }
+    ::v-deep .cd-dialog-container{
+      background: #fff !important;
+      margin-top: 50px !important;
+      width: 75%;
+      height: 80%;
+      .el-dialog__body{
+        padding: 20px 20px 0 20px;
+        height: calc(100% - 70px);
+      }
+      .el-dialog__header{
+        position: relative;
+      }
+    }
+    
+    ::v-deep .cd-full-dialog-container{
+      background: #fff !important;
+      .el-dialog__body{
+        padding: 10px;
+        height: calc(100% - 50px) !important;
+      }
+      .el-dialog__header{
+        position: relative;
+      }
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReportPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReportPage.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
new file mode 100644
index 00000000..670db458
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
@@ -0,0 +1,273 @@
+<template>
+  <div v-loading="loading" class="study-wrapper">
+    <div class="study-info">
+      <div
+        v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo"
+        :title="taskInfo.SubjectCode"
+      >
+        {{ taskInfo.SubjectCode }}
+      </div>
+      <div
+        v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo"
+        :title="visitTaskInfo.TaskBlindName"
+      >
+        {{ visitTaskInfo.TaskBlindName }}
+      </div>
+    </div>
+    <div class="ps">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item v-for="(study, index) in studyList" :key="`${study.StudyId}`" :name="`${study.StudyId}`">
+          <template slot="title">
+            <div
+              v-if="!study.IsCriticalSequence"
+              class="dicom-desc"
+            >
+              <template  v-if="taskInfo && taskInfo.IsShowStudyName">
+                <div style="text-overflow: ellipsis;overflow: hidden;">
+                  <span :title="study.StudyCode">{{ study.StudyCode }}</span>
+                  <span v-if="study.StudyName" :title="study.StudyName" style="margin-left: 5px;">{{ study.StudyName }}</span>
+                  <span v-else :title="study.Modalities" style="margin-left: 5px;">{{ `${study.Modalities} (${study.SeriesCount})` }}</span>
+                </div>
+                <div style="text-overflow: ellipsis;overflow: hidden;" v-if="study.StudyName" >
+                  <span :title="study.Modalities">{{ `${study.Modalities} (${study.SeriesCount})` }}</span>
+                </div>
+              </template>
+              <template v-else-if="taskInfo && !taskInfo.IsShowStudyName">
+                <div style="text-overflow: ellipsis;overflow: hidden;">
+                  <span :title="study.StudyCode">{{ study.StudyCode }}</span>
+                  <span :title="study.Modalities">{{ `${study.Modalities} (${study.SeriesCount})` }}</span>
+                </div>
+              </template>
+             
+            </div>
+            <div v-else>
+              <!-- 关键序列 -->
+              {{ $t('trials:reading:title:keySeries') }}
+            </div>
+          </template>
+          <div class="dicom-list-container">
+            <div
+              v-for="(series, i) in study.SeriesList"
+              :key="i"
+              style="position:relative;margin-top:1px;"
+              @click="activeSeries(series, i, index)"
+            >
+              <div
+                :class="{'series-active': index === activeStudyIndex && i === activeSeriesIndex}"
+                class="series-wrapper"
+              >
+                <div class="series-image">
+                  <el-image
+                    style="width: 100%;height: 100%;"
+                    :src="`${OSSclientConfig.basePath}${series.ImageResizePath}`"
+                    fit="fill"
+                    crossorigin="anonymous"
+                  />
+                </div>
+                <div class="series-text" >
+                  <div class="text-desc" v-if="!study.IsCriticalSequence" :title="series.SeriesNumber">
+                    #{{ series.SeriesNumber }}
+                  </div>
+                  <div class="text-desc" v-if="series.Description" :title="series.Description">
+                    {{ series.Description }}
+                  </div>
+                  <div class="text-desc" v-if="series.SliceThickness && !study.IsCriticalSequence">
+                    T: {{ parseFloat(series.SliceThickness).toFixed(digitPlaces) }}
+                  </div>
+                  <div class="text-desc">
+                    <span v-show="series.LoadedImageCount < series.InstanceCount">
+                      {{ series.Modality }}: {{ series.LoadedImageCount }}/{{ series.InstanceCount }} image
+                    </span>
+                    <span v-show="series.LoadedImageCount >= series.InstanceCount">{{ series.Modality }}: {{ series.InstanceCount }} image</span>
+                  </div>
+                  <div v-show="series.IsBeMark">
+                    <i class="el-icon-star-on" style="font-size: 16px;color: #ff5722;" />
+                  </div>
+                </div>
+              </div>
+              <div v-if="series.IsDicom && series.LoadedImageProgress>0 && series.LoadedImageProgress<100" style="width: 100%;">
+                <el-progress
+                  :percentage="parseInt((series.LoadedImageProgress).toFixed(2))"
+                />
+              </div>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'StudyList',
+  props: {
+    visitTaskInfo: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      activeNames: [],
+      activeStudyIndex: -1,
+      activeSeriesIndex: -1,
+      taskInfo: null,
+      studyList: [],
+      digitPlaces: 2
+    }
+  },
+  mounted() {
+    this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
+    let digitPlaces = Number(localStorage.getItem('digitPlaces'))
+    this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
+    this.studyList = this.visitTaskInfo.StudyList
+    if (this.studyList.length === 0) return
+    this.$nextTick(() => {
+      this.activeStudy(this.studyList[0].StudyId)
+    })
+  },
+  methods: {
+    activeSeries(series, seriesIndex, studyIndex) {
+      this.activeStudyIndex = studyIndex
+      this.activeSeriesIndex = seriesIndex
+      this.$emit('activeSeries', series)
+    },
+    activeStudy(id) {
+      if (this.activeNames.indexOf(id) > -1) return
+      this.activeNames.push(id)
+    },
+    setSeriesActive(studyIndex, seriesIndex) {
+      this.activeStudyIndex = studyIndex
+      this.activeSeriesIndex = seriesIndex
+      let studyId = this.studyList[studyIndex].StudyId
+      if (!studyId) return
+      this.activeStudy(studyId)
+    },
+    getPreviousOrNextSeries(type, series) {
+      let seriseList = this.studyList.map(s => s.SeriesList).flat()
+      let i = seriseList.findIndex(i => i.Id === series.Id && i.StudyId === series.StudyId)
+      if (i === -1) return
+      let newIndex = null
+      if (type === -1) {
+        newIndex = i === 0 ? i : i - 1
+      } else {
+        newIndex = i >= seriseList.length - 1 ? i : i +1
+      }
+      let studyIndex = seriseList[newIndex].StudyIndex
+      let seriesIndex = seriseList[newIndex].SeriesIndex
+      this.setSeriesActive(studyIndex, seriesIndex)
+      this.activeSeries(seriseList[newIndex], seriesIndex, studyIndex)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.study-wrapper{
+  width:100%;
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  .study-info {
+    font-size: 16px;
+    font-weight: bold;
+    color: #ddd;
+    padding: 5px 0px;
+    margin: 0;
+    text-align: center;
+    background-color: #4c4c4c;
+    height: 50px;
+  }
+  .dicom-desc{
+    font-weight: bold;
+    font-size: 13px;
+    text-align: left;
+    color: #d0d0d0;
+    padding: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ps {
+    flex: 1;
+    overflow-anchor: none;
+    touch-action: auto;
+    overflow-y: auto;
+  }
+  .series-active {
+    background-color: #607d8b!important;
+    border: 1px solid #607d8b!important;
+  }
+  ::v-deep.el-progress__text{
+    color: #ccc;
+    font-size: 12px;
+  }
+  .dicom-list-container{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    .series-wrapper {
+      width: 100%;
+      padding: 5px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+      background-color: #3a3a3a;
+      .el-progress__text{
+        display: none;
+      }
+      .el-progress-bar{
+        padding-right:0px;
+      }
+      .series-image {
+        width: 50px;
+        height: 50px;
+      }
+      .series-text {
+        flex: 1;
+        padding-left: 5px;
+        color: #ddd;
+        .text-desc {
+          width: 100px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 12px;
+          line-height: 16px;
+        }
+      }
+
+    }
+  }
+  ::v-deep.el-collapse{
+    border: none;
+    .el-collapse-item{
+      background-color: #000!important;
+      color: #ddd;
+
+    }
+    .el-collapse-item__content{
+      padding-bottom:0px;
+      background-color: #000!important;
+    }
+    .el-collapse-item__header{
+      background-color: #000!important;
+      color: #ddd;
+      border-bottom-color:#5a5a5a;
+      padding-left: 5px;
+      // height: 50px;
+      line-height: 20px;
+    }
+  }
+  ::v-deep .el-progress-bar__inner{
+    transition: width 0s ease;
+  }
+}
+</style>
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
new file mode 100644
index 00000000..3256127a
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
@@ -0,0 +1,551 @@
+<template>
+  <div 
+    ref="viewport"
+    class="viewport-wrapper"
+    @mouseup="sliderMouseup"
+    @mousemove="sliderMousemove"
+    @mouseleave="sliderMouseleave"
+  >
+    <div class="left-top-text" v-if="series && taskInfo">
+      <div
+        v-if="taskInfo.IsExistsClinicalData"
+        class="cd-info"
+        :title="$t('trials:reading:button:clinicalData')"
+      >
+        <svg-icon 
+          style="cursor: pointer;" 
+          icon-class="documentation" 
+          class="svg-icon" 
+          @click.stop="viewCD(series.TaskInfo.VisitTaskId)" />
+      </div>
+      <h2
+        v-if="taskInfo.IsReadingShowSubjectInfo"
+        class="subject-info"
+      >
+        {{ `${series.TaskInfo.SubjectCode} ${series.TaskInfo.TaskBlindName} ` }}
+      </h2>
+      <div>Series: #{{ series.SeriesNumber }}</div>
+      <div>Image: #{{ `${series.SliceIndex + 1}/${series.ImageIds.length}` }}</div>
+      <div>{{series.Modality}}</div>
+    </div>
+    <div
+      v-if="series && taskInfo && taskInfo.IsReadingTaskViewInOrder === 1"
+      class="top-center-tool"
+    >
+      <div class="toggle-visit-container">
+        <div
+          class="arrw_icon"
+          :style="{ cursor: series.TaskInfo.VisitTaskNum !== 0 ? 'pointer' : 'not-allowed', color: series.TaskInfo.VisitTaskNum !== 0 ? '#fff': '#6b6b6b' }"
+          @click.stop.prevent="toggleTask($event, series.TaskInfo.VisitTaskNum, -1)"
+          @dblclick.stop="preventDefault($event)"
+        >
+          <i class="el-icon-caret-left" />
+        </div>
+        <div class="arrow_text">
+          {{ series.TaskInfo.TaskBlindName }}
+        </div>
+        <div
+          class="arrw_icon"
+          :style="{ cursor: series.TaskInfo.VisitTaskNum < taskInfo.VisitNum ? 'pointer' : 'not-allowed', color: series.TaskInfo.VisitTaskNum < taskInfo.VisitNum ? '#fff': '#6b6b6b' }"
+          @click.stop.prevent="toggleTask($event, series.TaskInfo.VisitTaskNum, 1)"
+          @dblclick.stop="preventDefault($event)"
+        >
+          <i class="el-icon-caret-right" />
+        </div>
+      </div>
+    </div>
+    <div class="right-top-text" v-if="series">
+      <div>{{ series.Description }}</div>
+    </div>
+    <div class="left-bottom-text" v-if="series">
+      <div v-show="mousePosition.index.length > 0">
+        Pos: {{ mousePosition.index[0] }}, {{ mousePosition.index[1] }}, {{ mousePosition.index[2] }}
+      </div>
+      <div v-if="(series.Modality === 'CT' || series.Modality === 'DR' || series.Modality === 'CR') && mousePosition.value">
+        HU: {{ mousePosition.value }}
+      </div>
+      <div v-else-if="(series.Modality === 'PT' && mousePosition.value)">
+        SUVbw(g/ml): {{ digitPlaces === -1 ?mousePosition.value.toFixed(3) :mousePosition.value.toFixed(digitPlaces) }}
+      </div>
+      <div v-else-if="mousePosition.value">
+        Density: {{ mousePosition.value }}
+      </div>
+      <div v-show="imageInfo.size">
+        W*H: {{ imageInfo.size }}
+      </div>
+    </div>
+    <div class="right-bottom-text" v-if="series">
+      <div v-show="imageInfo.location">Location: {{ `${Number(imageInfo.location).toFixed(digitPlaces)} mm` }}</div>
+      <div v-show="series.SliceThickness">Slice Thickness: {{ `${Number(series.SliceThickness).toFixed(digitPlaces)} mm` }}</div>
+      <div v-show="imageInfo.wwwc ">WW/WL: {{ imageInfo.wwwc }}</div>
+    </div>
+    <div class="orientation-top">
+      {{ markers.top }}
+    </div>
+    <div class="orientation-right">
+      {{ markers.right }}
+    </div>
+
+    <div class="orientation-bottom">
+      {{ markers.bottom }}
+    </div>
+    <div class="orientation-left">
+      {{ markers.left }}
+    </div>
+    <div ref="sliderBox" class="right-slider-box" @click.stop="clickSlider($event)">
+      <div :style="{top: sliderInfo.height + '%'}" class="slider" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
+    </div>
+  </div>
+</template>
+<script>
+import * as cornerstonejs from '@cornerstonejs/core'
+import {
+  RenderingEngine,
+  Enums,
+  imageLoader,
+  metaData,
+  getRenderingEngine,
+  eventTarget,
+  utilities as csUtils
+} from '@cornerstonejs/core'
+import * as cornerstoneTools from '@cornerstonejs/tools'
+import { vec3, mat4 } from 'gl-matrix'
+export default {
+  name: 'Viewport',
+  props: {
+    renderingEngineId: {
+      type: String,
+      required: true
+    },
+    viewportId: {
+      type: String,
+      required: true
+    },
+    viewportIndex: {
+      type: Number,
+      required: true
+    }
+  },
+  data(){
+    return {
+      element: '',
+      series: null,
+      taskInfo: null,
+      sliderInfo: {
+        oldB: null,
+        oldM: null,
+        isMove: false,
+        height: 0
+      },
+      mousePosition: { 
+        index: [], 
+        value: null, 
+        modalityUnit: '', 
+        world: []
+      },
+      imageInfo: {
+        zoom: null,
+        size: null,
+        location: null,
+        sliceThickness: null,
+        wwwc: null
+      },
+      digitPlaces: 2,
+      orientationMarkers: [],
+      originalMarkers: [],
+      markers: { top: '', right: '', bottom: '', left: '' },
+      playClipState: false,
+      wwwcIdx: 2
+    }
+  },
+  mounted() {
+    this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
+    let digitPlaces = Number(localStorage.getItem('digitPlaces'))
+    this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
+    this.$nextTick(()=>{
+      this.initViewport()
+    })
+    console.log(cornerstonejs)
+  },
+  methods: {
+    initViewport() {
+      this.element = this.$refs['viewport']
+      const resizeObserver = new ResizeObserver(() => {
+        const renderingEngine = getRenderingEngine(this.renderingEngineId)
+        if (renderingEngine) {
+          renderingEngine.resize(true, false)
+        }
+      })
+      this.element.oncontextmenu = (e) => e.preventDefault()
+      resizeObserver.observe(this.element)
+      this.element.addEventListener('CORNERSTONE_STACK_NEW_IMAGE', this.stackNewImage)
+      this.element.addEventListener('CORNERSTONE_VOI_MODIFIED', this.voiModified)
+      
+      this.element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.cornerstoneToolsMouseMove)
+      this.element.addEventListener('mouseleave', () => {
+      this.mousePosition.index = []
+    })
+      // console.log(cornerstonejs,cornerstoneTools)
+      // element.addEventListener('CORNERSTONE_STACK_NEW_IMAGE', this.stackNewImage)
+    },
+    stackNewImage(e) {
+      const { detail } = e
+      this.series.SliceIndex = detail.imageIdIndex
+      this.sliderInfo.height = detail.imageIdIndex * 100 / (this.series.ImageIds.length - 1)
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(this.viewportId)
+      let zoom = viewport.getZoom()
+      this.imageInfo.zoom = zoom.toFixed(4)
+      this.imageInfo.size = `${detail.image.columns}*${detail.image.rows}`
+      const imagePlaneModule = metaData.get('imagePlaneModule', detail.imageId)
+      this.imageInfo.location = imagePlaneModule.sliceLocation
+      // this.imageInfo.wwwc = `${Math.round(detail.image.windowWidth)}/${Math.round(detail.image.windowCenter)}`
+      this.getOrientationMarker()
+    },
+    voiModified(e) {
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(this.viewportId)
+      const properties = viewport.getProperties()
+      if (properties && properties.voiRange) {
+        var { lower, upper } = properties.voiRange
+        const { windowWidth, windowCenter } = csUtils.windowLevel.toWindowLevel(
+          lower,
+          upper
+        )
+        this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
+      }
+    },
+    getOrientationMarker() {
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(this.viewportId)
+      const { viewUp, viewPlaneNormal } = viewport.getCamera()
+
+      const viewRight = vec3.create()
+      vec3.cross(viewRight, viewUp, viewPlaneNormal)
+
+      const columnCosines = [-viewUp[0], -viewUp[1], -viewUp[2]]
+      const rowCosines = viewRight
+      const rowString = cornerstoneTools.utilities.orientation.getOrientationStringLPS(rowCosines)
+      const columnString = cornerstoneTools.utilities.orientation.getOrientationStringLPS(columnCosines)
+      const oppositeRowString = cornerstoneTools.utilities.orientation.invertOrientationStringLPS(rowString)
+      const oppositeColumnString = cornerstoneTools.utilities.orientation.invertOrientationStringLPS(columnString)
+      this.markers.top = oppositeColumnString
+      this.markers.right = rowString
+      this.markers.bottom = columnString
+      this.markers.left = oppositeRowString
+      this.orientationMarkers = [oppositeColumnString, rowString, columnString, oppositeRowString]
+      if (this.originalMarkers.length === 0) {
+        this.originalMarkers = [...this.orientationMarkers]
+      }
+    },
+    setMarkers() {
+      let markers = [...this.orientationMarkers]
+      for (const key in this.markers) {
+        let v = markers.shift(0)
+        this.markers[key] = v
+      }
+    },
+    resetOrientationMarkers() {
+      if (this.originalMarkers.length > 0) {
+        console.log(this.originalMarkers)
+        this.orientationMarkers = [...this.originalMarkers]
+        this.setMarkers()
+      }
+    },
+    rotateOrientationMarkers(type) {
+      if (this.orientationMarkers.length > 0) {
+        if (type === 1) {
+          this.resetOrientationMarkers()
+          return
+        }
+        let markers = [...this.orientationMarkers]
+        if (type === 2) {
+          // 垂直翻转
+          this.orientationMarkers[0] = markers[2]
+          this.orientationMarkers[2] = markers[0]
+        } else if (type === 3) {
+          // 水平翻转
+          this.orientationMarkers[1] = markers[3]
+          this.orientationMarkers[3] = markers[1]
+        } else if (type === 4) {
+          // 左转90度
+          this.orientationMarkers = markers.slice(1, 4).concat(markers[0])
+        } else if (type === 5) {
+          // 右转90度
+          this.orientationMarkers = [markers[3]].concat(markers.slice(0, 3))
+        }
+        this.setMarkers()
+      }
+    },
+    toggleClipPlay(isPlay, framesPerSecond) {
+      this.playClipState = isPlay
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(this.viewportId)
+      
+      if (isPlay) {
+        cornerstoneTools.utilities.cine.playClip(viewport.element, { framesPerSecond })
+      } else {
+        cornerstoneTools.utilities.cine.stopClip(viewport.element)
+      }
+    },
+    scrollPage(type) {
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(this.viewportId)
+      const currentImageIdIndex = viewport.getCurrentImageIdIndex();
+      const numImages = viewport.getImageIds().length;
+      let newImageIdIndex = null;
+      if (type === 0) {
+        newImageIdIndex = 0
+      } else if (type === -1) {
+        newImageIdIndex = currentImageIdIndex === 0 ? currentImageIdIndex : currentImageIdIndex - 1
+      } else if (type === 1) {
+        newImageIdIndex = currentImageIdIndex === numImages - 1 ? currentImageIdIndex : currentImageIdIndex + 1
+      } else if (type === 99999) {
+        newImageIdIndex = numImages -1
+      }
+      viewport.setImageIdIndex(newImageIdIndex);
+    },
+    setZoom(ratio) {
+      const renderingEngine = getRenderingEngine(this.renderingEngineId);
+      const viewport = renderingEngine.getViewport(this.viewportId);
+
+      const zoom = viewport.getZoom();
+      if (ratio > 0) {
+        viewport.setZoom(zoom * 1.05);
+      } else {
+        viewport.setZoom(zoom / 1.05);
+      }
+      viewport.render();
+    },
+    resize(forceFitToWindow) {
+      console.log('resize: ', forceFitToWindow)
+      const renderingEngine = getRenderingEngine(this.renderingEngineId);
+      renderingEngine.resize(true, forceFitToWindow)
+    },
+    async setSeriesInfo(obj){
+      if (this.series && obj.Id === this.series.Id && obj.Description === this.series.Description) return
+      this.series = {...obj}
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(this.viewportId)
+      await viewport.setStack(obj.ImageIds, obj.SliceIndex)
+      cornerstoneTools.utilities.stackPrefetch.enable(viewport.element);
+      viewport.render()
+    },
+    cornerstoneToolsMouseMove(e) {
+      const { currentPoints } = e.detail
+      const worldPoint = currentPoints.world
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(this.viewportId)
+      const imageData = viewport.getImageData()
+      if (!imageData) return
+      const index = imageData.imageData.worldToIndex(worldPoint)
+      index[0] = Math.floor(index[0])
+      index[1] = Math.floor(index[1])
+      index[2] = Math.floor(index[2])
+      this.mousePosition.index = index
+    },
+    toggleTask(evt, visitTaskNum, i) {
+      this.$emit('activeViewport', this.viewportIndex)
+      const num = visitTaskNum + i
+      if (num >= 0 && num <= this.taskInfo.VisitNum) {
+        this.$emit('toggleTaskByViewport', {series: this.series, visitTaskNum: num})
+      }
+
+      evt.stopImmediatePropagation()
+      evt.stopPropagation()
+      evt.preventDefault()
+    },
+    viewCD(taskId) {
+      this.$emit('previewCD', taskId)
+    },
+    setWwwcIdx(idx) {
+      this.wwwcIdx = idx
+    },
+    clickSlider(e) {
+      const height = e.offsetY * 100 / this.$refs['sliderBox'].clientHeight
+      this.sliderInfo.height = height
+      let sliceIdx = Math.trunc(this.series.ImageIds.length * height / 100)
+      sliceIdx = sliceIdx >= this.series.ImageIds.length ? this.series.ImageIds.length - 1 : sliceIdx < 0 ? 0 : sliceIdx
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(
+        this.viewportId
+      )
+      viewport.setImageIdIndex(sliceIdx)
+      viewport.render()
+    },
+    sliderMouseup(e) {
+      this.sliderInfo.isMove = false
+    },
+    sliderMousedown(e) {
+      const boxHeight = this.$refs['sliderBox'].clientHeight
+      this.sliderInfo.oldB = parseInt(e.srcElement.style.top) * boxHeight / 100
+      this.sliderInfo.oldM = e.clientY
+      this.sliderInfo.isMove = true
+      e.stopImmediatePropagation()
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    sliderMousemove(e) {
+      if (!this.sliderInfo.isMove) return
+      const delta = this.sliderInfo.oldB - (this.sliderInfo.oldM - e.clientY)
+      const boxHeight = this.$refs['sliderBox'].clientHeight
+      if (delta < 0) return
+      if (delta > boxHeight) return
+      const height = delta * 100 / boxHeight
+      let sliceIdx = Math.trunc(this.series.ImageIds.length * height / 100)
+      sliceIdx = sliceIdx >= this.series.ImageIds.length ? this.series.ImageIds.length - 1 : sliceIdx < 0 ? 0 : sliceIdx
+      this.sliderInfo.height = height
+      const renderingEngine = getRenderingEngine(this.renderingEngineId)
+      const viewport = renderingEngine.getViewport(
+        this.viewportId
+      )
+      viewport.setImageIdIndex(sliceIdx)
+      viewport.render()
+    },
+    sliderMouseleave(e) {
+      if (!this.sliderInfo.isMove) return
+      this.sliderInfo.isMove = false
+    },
+    preventDefault(e) {
+      e.stopImmediatePropagation()
+      e.stopPropagation()
+      e.preventDefault()
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.viewport-wrapper {
+  width:100%;
+  height:100%;
+  position: relative;
+  .left-top-text {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    color: #ddd;
+    z-index: 1;
+    font-size: 12px;
+    .cd-info {
+      color: #ddd;
+      font-size: 18px;
+    }
+    .subject-info {
+      color:#f44336;
+      padding: 5px 0px;
+      margin: 0;
+    }
+  }
+  .top-center-tool {
+    position: absolute;
+    left:50%;
+    top: 5px;
+    transform: translateX(-50%);
+    z-index: 1;
+    .toggle-visit-container {
+      display: flex;
+    }
+    .arrw_icon{
+      width: 20px;
+      height: 20px;
+      background-color: #3f3f3f;
+      text-align: center;
+      line-height: 20px;
+      border-radius: 10%;
+    }
+    .arrow_text{
+      height: 20px;
+      line-height: 20px;
+      background-color: #00000057;
+      color: #fff;
+      padding:0 10px;
+      font-size: 14px;
+    }
+  }
+  .right-top-text {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    color: #ddd;
+    z-index: 1;
+    font-size: 12px;
+  }
+  .left-bottom-text {
+    position: absolute;
+    left: 5px;
+    bottom: 5px;
+    color: #ddd;
+    z-index: 1;
+    font-size: 12px;
+  }
+  .right-bottom-text {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    color: #ddd;
+    z-index: 1;
+    font-size: 12px;
+  }
+  .right-slider-box {
+    position: absolute;
+    right: 1px;
+    height: calc(100% - 140px);
+    transform: translateY(-50%);
+    top: calc(50% - 30px);
+    width: 10px;
+    background: #333;
+    z-index: 1;
+    cursor: pointer;
+  }
+  .right-slider-box:after{
+    content: '';
+    position: absolute;
+    bottom: -20px;
+    left: 0;
+    height: 20px;
+    width: 100%;
+    background: #333;
+  }
+  .slider {
+    height: 20px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    z-index:10;
+    background: #9e9e9e;
+    cursor: move
+  }
+  .orientation-top {
+    position: absolute;
+    left: 50%;
+    top: 30px;
+    color: #f44336;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+  .orientation-bottom {
+    position: absolute;
+    left: 50%;
+    bottom: 15px;
+    color: #f44336;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+  .orientation-left {
+    position: absolute;
+    top: 50%;
+    left: 15px;
+    color: #f44336;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+  .orientation-right {
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    color: #f44336;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/VisitReview.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/VisitReview.vue
new file mode 100644
index 00000000..f9908be8
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/VisitReview.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="visit-review-container">
+    <el-tabs
+      v-model="activeName"
+    >
+      <!-- 阅片 -->
+      <el-tab-pane
+        v-if="taskInfo"
+        :label="$t('trials:reading:tabTitle:review')"
+        name="read"
+      >
+        <read-page />
+      </el-tab-pane>
+      <!-- 报告 -->
+      <el-tab-pane
+        v-if="taskInfo && !taskInfo.IseCRFShowInDicomReading"
+        :label="$t('trials:reading:tabTitle:report')"
+        name="report"
+      >
+        <report-page v-if="activeName === 'report'" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import ReadPage from './ReadPage'
+import ReportPage from './ReportPage'
+export default {
+  name: 'VisitReview',
+  components: {
+    ReadPage,
+    ReportPage
+  },
+  data() {
+    return {
+      activeName: 'read',
+      taskInfo: null
+    }
+  },
+  mounted() {
+    this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .visit-review-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: #000;
+    padding: 5px;
+    ::v-deep .el-tabs {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .el-tabs__item {
+        color: #fff;
+      }
+      .el-tabs__item.is-active {
+        color: #428bca;
+      }
+      .el-tabs__item:hover {
+        color: #428bca;
+      }
+      .el-tabs__header {
+        height: 50px;
+        margin:0px;
+      }
+      .el-tabs__content {
+        flex: 1;
+        margin:0px;
+      }
+      .el-tab-pane {
+        height: 100%;
+      }
+
+    }
+  }
+</style>
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/toolConfig.js b/src/views/trials/trials-panel/reading/dicoms3D/components/toolConfig.js
new file mode 100644
index 00000000..9427deb2
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/toolConfig.js
@@ -0,0 +1,193 @@
+const config = {
+  "standards": [
+    {
+      "type": 1,
+      "name": "RECIST 1.1",
+      "tools": [
+        { 
+          "name": "直径测量工具", 
+          "icon": "length", 
+          "toolName": "Length",
+          "i18nKey": "trials:reading:button:length"
+        },
+        { 
+          "name": "长短径测量工具", 
+          "icon": "bidirection", 
+          "toolName": "Bidirectional",
+          "i18nKey": "trials:reading:button:bidirectional"
+        },
+        { 
+          "name": "矩形工具", 
+          "icon": "rectangle", 
+          "toolName": "RectangleRoi",
+          "i18nKey": "trials:reading:button:rectangle"
+        },
+        { 
+          "name": "箭头工具", 
+          "icon": "arrow", 
+          "toolName": "ArrowAnnotate",
+          "i18nKey": "trials:reading:button:arrowAnnotate"
+        }
+      ]
+    },
+    {
+      "type": 2,
+      "name": "Lugano 2014",
+      "tools": [
+        { 
+          "name": "直径测量工具", 
+          "icon": "length", 
+          "toolName": "Length",
+          "i18nKey": "trials:reading:button:length"
+        },
+        { 
+          "name": "长短径测量工具", 
+          "icon": "bidirection", 
+          "toolName": "Bidirectional",
+          "i18nKey": "trials:reading:button:bidirectional"
+        },
+        { 
+          "name": "矩形工具", 
+          "icon": "rectangle", 
+          "toolName": "RectangleRoi",
+          "i18nKey": "trials:reading:button:rectangle"
+        },
+        { 
+          "name": "箭头工具", 
+          "icon": "arrow", 
+          "toolName": "ArrowAnnotate",
+          "i18nKey": "trials:reading:button:arrowAnnotate"
+        }
+      ]
+    },
+    {
+      "type": 3,
+      "name": "iRECIST",
+      "tools": [
+        { 
+          "name": "直径测量工具", 
+          "icon": "length", 
+          "toolName": "Length",
+          "i18nKey": "trials:reading:button:length"
+        },
+        { 
+          "name": "长短径测量工具", 
+          "icon": "bidirection", 
+          "toolName": "Bidirectional",
+          "i18nKey": "trials:reading:button:bidirectional"
+        },
+        { 
+          "name": "矩形工具", 
+          "icon": "rectangle", 
+          "toolName": "RectangleRoi",
+          "i18nKey": "trials:reading:button:rectangle"
+        },
+        { 
+          "name": "箭头工具", 
+          "icon": "arrow", 
+          "toolName": "ArrowAnnotate",
+          "i18nKey": "trials:reading:button:arrowAnnotate"
+        }
+      ]
+    },
+    {
+      "type": 7,
+      "name": "mRECIST HCC",
+      "tools": [
+        { 
+          "name": "直径测量工具", 
+          "icon": "length", 
+          "toolName": "Length",
+          "i18nKey": "trials:reading:button:length"
+        },
+        { 
+          "name": "长短径测量工具", 
+          "icon": "bidirection", 
+          "toolName": "Bidirectional",
+          "i18nKey": "trials:reading:button:bidirectional"
+        },
+        { 
+          "name": "矩形工具", 
+          "icon": "rectangle", 
+          "toolName": "RectangleRoi",
+          "i18nKey": "trials:reading:button:rectangle"
+        },
+        { 
+          "name": "箭头工具", 
+          "icon": "arrow", 
+          "toolName": "ArrowAnnotate",
+          "i18nKey": "trials:reading:button:arrowAnnotate"
+        }
+      ]
+    },
+    {
+      "type": 10,
+      "name": "PCWG3",
+      "tools": [
+        { 
+          "name": "矩形工具", 
+          "icon": "rectangle", 
+          "toolName": "RectangleRoi",
+          "i18nKey": "trials:reading:button:rectangle"
+        },
+        { 
+          "name": "箭头工具", 
+          "icon": "arrow", 
+          "toolName": "ArrowAnnotate",
+          "i18nKey": "trials:reading:button:arrowAnnotate"
+        }
+      ]
+    },
+    {
+      "type": 17,
+      "name": "PCWG3",
+      "tools": [
+        { 
+          "name": "直径测量工具", 
+          "icon": "length", 
+          "toolName": "Length",
+          "i18nKey": "trials:reading:button:length"
+        },
+        { 
+          "name": "矩形工具", 
+          "icon": "rectangle", 
+          "toolName": "RectangleRoi",
+          "i18nKey": "trials:reading:button:rectangle"
+        },
+        { 
+          "name": "箭头工具", 
+          "icon": "arrow", 
+          "toolName": "ArrowAnnotate",
+          "i18nKey": "trials:reading:button:arrowAnnotate"
+        }
+      ]
+    },
+    {
+      "type": 19,
+      "name": "IVUS定量评估",
+      "tools": []
+    },
+    {
+      "type": 20,
+      "name": "OCT定量评估",
+      "tools": []
+    },
+    {
+      "type": 21,
+      "name": "MRI-PDFF",
+      "tools": [
+        { 
+          "name": "圆形测量", 
+          "icon": "oval", 
+          "toolName": "Probe",
+          "i18nKey": "trials:reading:button:circle"
+        }
+      ]
+    }
+  ]
+}
+const getTools = (criterionType) => {
+  const standard = config.standards.find(s => s.type === criterionType);
+  return standard?.tools || [];
+};
+export {config, getTools}
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/index.vue b/src/views/trials/trials-panel/reading/dicoms3D/index.vue
new file mode 100644
index 00000000..cc0b6467
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <div v-loading="loading" class="reading-viewer-container">
+    <!-- 访视阅片 -->
+    <visit-review 
+      v-if="taskInfo && taskInfo.ReadingCategory=== 1" 
+    />
+    <!-- 临床数据 -->
+    <el-dialog
+      :visible.sync="clinicalDataVisible"
+      :custom-class="isClinicalDataFullscreen?'full-dialog-container':'dialog-container'"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :fullscreen="isClinicalDataFullscreen"
+    >
+      <span slot="title" class="dialog-footer">
+        <!-- 当前阅片任务存在临床数据，请查看。若已查看，请点击“确认” -->
+        <span v-if="!closeCDVisible">{{ $t('trials:reading:dagTitle:msg1') }}</span>
+        <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 v-if="closeCDVisible" 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
+          v-if="clinicalDataVisible"
+          style="flex: 1"
+          :trial-id="trialId"
+          :subject-id="taskInfo.SubjectId"
+          :visit-task-id="cdVisitTaskId"
+          :is-reading-show-subject-info="taskInfo.IsReadingShowSubjectInfo"
+        />
+        <div v-if="!closeCDVisible" style="text-align:right">
+          <el-button type="primary" @click="handleConfirmCD">{{ $t('trials:reading:button:confirm') }}</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import VisitReview from './components/VisitReview'
+import ClinicalData from '@/views/trials/trials-panel/reading/clinical-data'
+export default {
+  name:'Dicoms3d',
+  components: { VisitReview,ClinicalData },
+  data() {
+    return {
+      taskInfo: null,
+      trialId: '',
+      loading: false,
+      clinicalDataVisible: false,
+      isClinicalDataFullscreen: false,
+      closeCDVisible: false,
+      cdVisitTaskId: ''
+    }
+  },
+  mounted() {
+    this.trialId = this.$route.query.trialId
+    this.getTaskInfo()
+  },
+  methods: {
+    async getTaskInfo() {
+      this.loading = true
+      try {
+        const params = {
+          subjectId: this.$route.query.subjectId,
+          trialId: this.$route.query.trialId,
+          subjectCode: this.$route.query.subjectCode,
+          visitTaskId: this.$route.query.visitTaskId,
+          trialReadingCriterionId: this.$route.query.TrialReadingCriterionId
+        }
+        const res = await getNextTask(params)
+        this.taskInfo = res.Result
+        localStorage.setItem('taskInfo', JSON.stringify(res.Result))
+        localStorage.setItem('digitPlaces', JSON.stringify(res.Result.DigitPlaces))
+        this.loading = false
+        this.$nextTick(() => {
+          if (this.taskInfo.IsExistsClinicalData && this.taskInfo.IsNeedReadClinicalData && !this.taskInfo.IsReadClinicalData) {
+            this.isClinicalDataFullscreen = false
+            this.clinicalDataVisible = true
+            this.cdVisitTaskId = this.taskInfo.VisitTaskId
+          }
+        })
+      } catch (e) {
+        console.log(e)
+        this.loading = false
+      }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.reading-viewer-container {
+  width: 100%;
+  height: 100%;
+  // ::v-deep .dialog-container{
+  //   margin-top: 50px !important;
+  //   width:75%;
+  //   height:80%;
+  // }
+  // ::v-deep .el-dialog__body{
+  //     padding: 10px;
+  //     height: calc(100% - 70px);
+  //   }
+  // .el-dialog__header{
+  //   position: relative;
+  // }
+  // .full-dialog-container{
+  //   ::v-deep .is-fullscreen .el-dialog__body{
+  //     height: calc(100% - 70px);
+  //   }
+  // }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/reading/visit-review/components/ReadPage.vue b/src/views/trials/trials-panel/reading/visit-review/components/ReadPage.vue
index 65093dbd..d65167fb 100644
--- a/src/views/trials/trials-panel/reading/visit-review/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/visit-review/components/ReadPage.vue
@@ -295,8 +295,8 @@ export default {
     async toggleTaskByViewer(visitTaskNum) {
       const i = this.visitTaskList.findIndex(v => v.VisitTaskNum === visitTaskNum)
       if (i === -1) return
-      const visistTaskId = this.visitTaskList[i].VisitTaskId
-      this.setActiveTaskVisitId(visistTaskId, true)
+      const visitTaskId = this.visitTaskList[i].VisitTaskId
+      this.setActiveTaskVisitId(visitTaskId, true)
     },
     // 设置激活的访视
     async setActiveTaskVisitId(id, isInitActiveFile = false) {