diff --git a/src/views/trials/trials-panel/reading/dicoms/components/ReportPage.vue b/src/views/trials/trials-panel/reading/dicoms/components/ReportPage.vue
index df82f47b..b5b244f4 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/ReportPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/ReportPage.vue
@@ -265,7 +265,7 @@ export default {
     ...mapGetters(['language']),
     isBaseline() {
       var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
-      return this.visitTaskList[i].IsBaseLine
+      return this.visitTaskList[i] ? this.visitTaskList[i].IsBaseLine : false
     }
   },
   watch: {
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue
index d92f2aff..99b6222d 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue
@@ -260,9 +260,9 @@ export default {
           this.defaultWindowLevel.windowCenter = windowCenter
           this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
         }
-        // const toolGroupId = `viewport-${this.viewportIndex}`
-        // const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
-        // toolGroup.setToolEnabled('ScaleOverlay')
+        const toolGroupId = this.viewportId
+        const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId)
+        toolGroup.setToolEnabled('ScaleOverlay')
       }
 
     },
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
index 0bc8a2a7..c64aa02b 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -1,40 +1,21 @@
 <template>
-  <div
-    v-loading="loading"
-    :element-loading-text="loadingText"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    class="read-page-container"
-  >
+  <div v-loading="loading" :element-loading-text="loadingText" element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)" 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 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 v-loading="sLoading" class="study-info">
-        <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"
-            :marked-series-ids="markedSeriesIds"
-            @activeSeries="activeSeries"
-            @showMultiFrame="showMultiFrame"
-          />
+        <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" :marked-series-ids="markedSeriesIds" @activeSeries="activeSeries"
+            @showMultiFrame="showMultiFrame" />
 
         </div>
       </div>
@@ -47,12 +28,8 @@
         <div class="tools-wrapper">
           <div class="tools-left">
             <!-- 布局 -->
-            <div
-              :class="['tool-item', isFusion ? 'tool-disabled' : '']"
-              :title="$t('trials:reading:button:layout')"
-              @click.stop="showPanel($event, 'layout')"
-              @mouseleave="toolMouseout"
-            >
+            <div :class="['tool-item', isFusion ? 'tool-disabled' : '']" :title="$t('trials:reading:button:layout')"
+              @click.stop="showPanel($event, 'layout')" @mouseleave="toolMouseout">
               <div class="dropdown">
                 <div class="icon">
                   <svg-icon icon-class="layout" class="svg-icon" />
@@ -73,7 +50,8 @@
                         A
                       </div>
                     </li>
-                    <li v-if="taskInfo && taskInfo.IsReadingTaskViewInOrder === 1" class="layout_flex_row" @click.stop="changeLayout(3)">
+                    <li v-if="taskInfo && taskInfo.IsReadingTaskViewInOrder === 1" class="layout_flex_row"
+                      @click.stop="changeLayout(3)">
                       <div class="layout_box_1_1">
                         A
                       </div>
@@ -106,12 +84,9 @@
               </div>
             </div>
             <!-- 调窗 -->
-            <div
-              :class="['tool-item', activeTool === 'WindowLevel' ? 'tool-item-active' : '']"
-              :title="$t('trials:reading:button:wwwc')"
-              @click.stop="setWindowLevelActive($event)"
-              @mouseleave="toolMouseout"
-            >
+            <div :class="['tool-item', activeTool === 'WindowLevel' ? 'tool-item-active' : '']"
+              :title="$t('trials:reading:button:wwwc')" @click.stop="setWindowLevelActive($event)"
+              @mouseleave="toolMouseout">
               <div class="dropdown">
                 <div class="icon">
                   <svg-icon icon-class="reverse" class="svg-icon" />
@@ -121,7 +96,8 @@
                   <ul style="width:165px;">
                     <li v-for="item in wwwcArr" :key="item.label">
                       <a href="#" @click.stop="changeVoiRange(item)">
-                        <div v-if="item.wc !== null" style="display:flex;flex-direction: row;justify-content: space-between;">
+                        <div v-if="item.wc !== null"
+                          style="display:flex;flex-direction: row;justify-content: space-between;">
                           <div>{{ item.label }}</div>
                           <div>{{ `${item.ww} / ${item.wc}` }}</div>
                         </div>
@@ -130,7 +106,7 @@
                         </div>
                       </a>
                       <el-divider v-if="item.val === 1" class="divider" content-position="center">
-                        {{ ` ${$t('trials:reading:title:preset') }` }}
+                        {{ ` ${$t('trials:reading:title:preset')}` }}
                       </el-divider>
                     </li>
                   </ul>
@@ -138,27 +114,17 @@
               </div>
             </div>
             <!-- 反色 -->
-            <div
-              class="tool-item"
-              :title="$t('trials:reading:button:reverseColor')"
-              @click.prevent="toggleInvert"
-            >
+            <div class="tool-item" :title="$t('trials:reading:button:reverseColor')" @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')"
-            >
+            <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')"
-            >
+            <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>
             <!-- 旋转 -->
@@ -169,18 +135,10 @@
             >
               <svg-icon icon-class="rotate" class="svg-icon" />
             </div> -->
-            <div
-              class="tool-item"
-              :title="$t('trials:reading:button:rotate')"
-              @click.stop="showPanel($event)"
-              @mouseleave="toolMouseout"
-            >
+            <div class="tool-item" :title="$t('trials:reading:button:rotate')" @click.stop="showPanel($event)"
+              @mouseleave="toolMouseout">
               <div class="dropdown">
-                <div
-                  class="icon"
-                  data-tool="Rotate"
-                  :class="[activeTool==='Rotate'?'tool_active':'']"
-                >
+                <div class="icon" data-tool="Rotate" :class="[activeTool === 'Rotate' ? 'tool_active' : '']">
                   <svg-icon icon-class="rotate" class="svg-icon" />
                   <i class="el-icon-arrow-down" style="color:#fff;" />
                 </div>
@@ -196,36 +154,27 @@
               </div>
             </div>
             <!-- 适应图像或窗口 -->
-            <div
-              class="tool-item"
+            <div class="tool-item"
               :title="forceFitToWindow ? `${$t('trials:reading:button:fitWindow')}` : `${$t('trials:reading:button:fitImage')}`"
-              @click.prevent="fitToType(forceFitToWindow)"
-            >
+              @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-if="readingTool === 2" class="tool-item" :title="$t('trials:lugano:button:fusion')" @click.prevent="openFusion">
+            <div v-if="readingTool === 2" class="tool-item" :title="$t('trials:lugano:button:fusion')"
+              @click.prevent="openFusion">
               <svg-icon icon-class="fusion" class="svg-icon" />
             </div>
-            <div
-              v-for="tool in tools"
-              :key="tool.toolName"
+            <div v-for="tool in tools" :key="tool.toolName"
               :class="['tool-item', readingTaskState === 2 ? 'tool-disabled' : '', activeTool === tool.toolName ? 'tool-item-active' : '']"
-              :style="{cursor: tool.isDisabled ? 'not-allowed' : 'pointer'}"
+              :style="{ cursor: tool.isDisabled ? 'not-allowed' : 'pointer' }"
               :title="tool.disabledReason ? tool.disabledReason : $t(`${tool.i18nKey}`)"
-              @click.prevent="setAnnotateToolActive(tool.toolName)"
-              @mouseenter="enter($event,tool.toolName)"
-            >
+              @click.prevent="setAnnotateToolActive(tool.toolName)" @mouseenter="enter($event, tool.toolName)">
               <svg-icon :icon-class="tool.icon" class="svg-icon" />
             </div>
             <!-- 清除标注 -->
-            <div
-              v-if="criterionType === 0"
-              :class="['tool-item', activeTool === 'Eraser' ? 'tool-item-active' : '']"
-              :title="$t('trials:dicom-show:Eraser')"
-              @click.prevent="setToolActive('Eraser')"
-            >
+            <div v-if="criterionType === 0" :class="['tool-item', activeTool === 'Eraser' ? 'tool-item-active' : '']"
+              :title="$t('trials:dicom-show:Eraser')" @click.prevent="setToolActive('Eraser')">
               <svg-icon icon-class="clear" class="svg-icon" />
             </div>
             <div class="tool-frame">
@@ -238,20 +187,11 @@
                 <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)"
-              >
+              <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)"
-              >
+              <div v-else :title="$t('trials:dicom-show:play')" class="icon" @click.prevent="toggleClipPlay(true)">
                 <svg-icon icon-class="play" class="svg-icon" />
               </div>
               <!-- 下一帧 -->
@@ -262,7 +202,8 @@
               <div :title="$t('trials:dicom-show:lastframe')" class="icon" @click.prevent="scrollPage(99999)">
                 <svg-icon icon-class="lastframe" class="svg-icon" />
               </div>
-              <select v-model="fps" :title="$t('trials:dicom-show:speed')" class="select-wrapper" :disabled="clipPlaying">
+              <select v-model="fps" :title="$t('trials:dicom-show:speed')" class="select-wrapper"
+                :disabled="clipPlaying">
                 <!-- 默认值 -->
                 <option :value="5">5</option>
                 <option :value="10">10</option>
@@ -273,32 +214,20 @@
               </select>
             </div>
             <!-- 重置 -->
-            <div
-              class="tool-item"
-              :title="$t('trials:reading:button:reset')"
-              @click.prevent="resetViewport"
-            >
+            <div class="tool-item" :title="$t('trials:reading:button:reset')" @click.prevent="resetViewport">
               <svg-icon icon-class="refresh" class="svg-icon" />
             </div>
             <!-- 更多 :class="['tool-item', readingTaskState === 2 ? 'tool-disabled' : '']" -->
-            <div
-              v-if="criterionType === 0"
-              :title="$t('trials:reading:button:more')"
-              :class="['tool-item']"
-              @click.stop="showPanel($event)"
-              @mouseleave="toolMouseout"
-            >
+            <div v-if="criterionType === 0" :title="$t('trials:reading:button:more')" :class="['tool-item']"
+              @click.stop="showPanel($event)" @mouseleave="toolMouseout">
               <div class="dropdown">
-                <div
-                  class="icon"
-                  data-tool="more"
-                >
+                <div class="icon" data-tool="more">
                   <svg-icon icon-class="more" class="svg-icon" />
                   <i class="el-icon-arrow-down" style="color:#fff;" />
                 </div>
                 <div class="dropdown-content">
                   <!--v-if="readingTaskState < 2"-->
-                  <ul  style="width:100px;">
+                  <ul style="width:100px;">
                     <li v-for="i in customizeStandards" :key="i.toolName" style="text-align:left;">
                       <a href="#" @click.prevent="setMoreToolActive(i.toolName)">
                         <svg-icon :icon-class="i.icon" class="svg-icon" style="margin-right: 5px;" />
@@ -309,32 +238,23 @@
                 </div>
               </div>
             </div>
-            <div
-                class="tool-item"
-                :title="$t('trials:reading:button:upload')"
-                v-if="trialCriterion.ImageUploadEnum > 0 && readingTaskState < 2"
-                v-hasPermi="['role:ir']"
-              >
-                <div class="tool-wrapper">
+            <div class="tool-item" :title="$t('trials:reading:button:upload')"
+              v-if="trialCriterion.ImageUploadEnum > 0 && readingTaskState < 2" v-hasPermi="['role:ir']">
+              <div class="tool-wrapper">
                 <div class="icon" @click.prevent="openUploadImage('upload')">
                   <i class="el-icon-upload2 svg-icon" />
                 </div>
               </div>
             </div>
-            <div
-              v-if="trialCriterion.ImageDownloadEnum > 0"
-              v-hasPermi="[
-                'role:ir',
-                'role:mim',
-                'role:mc',
-                'role:pm',
-                'role:apm',
-                'role:ea',
-                'role:qa',
-              ]"
-              class="tool-item"
-              :title="$t('trials:reading:button:download')"
-            >
+            <div v-if="trialCriterion.ImageDownloadEnum > 0" v-hasPermi="[
+              'role:ir',
+              'role:mim',
+              'role:mc',
+              'role:pm',
+              'role:apm',
+              'role:ea',
+              'role:qa',
+            ]" class="tool-item" :title="$t('trials:reading:button:download')">
               <div class="tool-wrapper">
                 <div class="icon" @click.prevent="openUploadImage('download')">
                   <i class="el-icon-download svg-icon" />
@@ -349,26 +269,16 @@
 
           <div>
             <!-- 手册 -->
-            <el-button
-              v-if="taskInfo && taskInfo.ExistsManual"
-              type="text"
-              @click="previewManuals"
-            >
+            <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)"
-            >
+            <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"
-            >
+            <el-button type="text" @click="previewConfig">
               {{ $t('trials:reading:button:customCfg') }}
             </el-button>
           </div>
@@ -377,104 +287,59 @@
           <!-- viewports -->
           <div class="viewports-wrapper">
             <div ref="container" class="grid-container">
-              <div :class="[ 'viewports-box', isFusion ? 'viewports-box-down' : '' ]" :style="gridStyle">
-                <div
-                  v-for="(v, index) in cellsMax"
-                  v-show="index < cells.length"
-                  :key="`viewport-${index}`"
+              <div :class="['viewports-box', isFusion ? 'viewports-box-down' : '']" :style="gridStyle">
+                <div v-for="(v, index) in cellsMax" v-show="index < cells.length" :key="`viewport-${index}`"
                   :style="cellStyle"
                   :class="['grid-cell', index === activeViewportIndex ? 'cell_active' : '', index === fullScreenIndex ? 'cell-full-screen' : '']"
-                  @dblclick="toggleFullScreen($event, index)"
-                  @click="activeViewport(index)"
-                >
-                  <Viewport
-                    :ref="`viewport-${index}`"
-                    :data-viewport-uid="`viewport-${index}`"
-                    :rendering-engine-id="renderingEngineId"
-                    :viewport-id="`viewport-${index}`"
-                    :viewport-index="index"
-                    @activeViewport="activeViewport"
-                    @toggleTaskByViewport="toggleTaskByViewport"
-                    @previewCD="previewCD"
-                    @renderAnnotations="renderAnnotations"
-                  />
+                  @dblclick="toggleFullScreen($event, index)" @click="activeViewport(index)">
+                  <Viewport :ref="`viewport-${index}`" :data-viewport-uid="`viewport-${index}`"
+                    :rendering-engine-id="renderingEngineId" :viewport-id="`viewport-${index}`" :viewport-index="index"
+                    @activeViewport="activeViewport" @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
+                    @renderAnnotations="renderAnnotations" />
                 </div>
               </div>
-              <div v-if="readingTool === 2" :class="[ 'viewports-box', !isFusion ? 'viewports-box-down' : '' ]" :style="gridStyle">
-                <div
-                  v-for="(v, index) in cellsMax"
-                  v-show="index < cells.length"
-                  :key="`viewport-fusion-${index}`"
+              <div v-if="readingTool === 2" :class="['viewports-box', !isFusion ? 'viewports-box-down' : '']"
+                :style="gridStyle">
+                <div v-for="(v, index) in cellsMax" v-show="index < cells.length" :key="`viewport-fusion-${index}`"
                   :style="cellStyle"
                   :class="['grid-cell', index === activeViewportIndex ? 'cell_active' : '', index === fullScreenIndex ? 'cell-full-screen' : '']"
-                  @dblclick="toggleFullScreen($event, index)"
-                  @click="activeViewport(index)"
-                >
-                  <PetCtViewport
-                    :ref="`viewport-fusion-${index}`"
-                    :data-viewport-uid="`viewport-fusion-${index}`"
-                    :rendering-engine-id="renderingEngineId"
-                    :viewport-id="`viewport-fusion-${index}`"
-                    :viewport-index="index"
-                    @activeViewport="activeViewport"
-                    @toggleTaskByViewport="toggleTaskByViewport"
-                    @previewCD="previewCD"
-                    @renderAnnotations="renderAnnotations"
-                    @upperRangeChange="upperRangeChange"
-                  />
+                  @dblclick="toggleFullScreen($event, index)" @click="activeViewport(index)">
+                  <PetCtViewport :ref="`viewport-fusion-${index}`" :data-viewport-uid="`viewport-fusion-${index}`"
+                    :rendering-engine-id="renderingEngineId" :viewport-id="`viewport-fusion-${index}`"
+                    :viewport-index="index" @activeViewport="activeViewport"
+                    @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
+                    @renderAnnotations="renderAnnotations" @upperRangeChange="upperRangeChange" />
                 </div>
               </div>
             </div>
           </div>
           <!-- 表单 -->
           <div class="form-wrapper">
-            <div
-              v-for="s in visitTaskList"
-              v-show="lastViewportTaskId === s.VisitTaskId"
-              :key="s.VisitTaskId"
-              style="height: 100%;"
-            >
-              <mRecisit
-                v-if="lastViewportTaskId && criterionType === 7 && lastViewportTaskIds.includes(s.VisitTaskId)"
+            <div v-for="s in visitTaskList" v-show="lastViewportTaskId === s.VisitTaskId" :key="s.VisitTaskId"
+              style="height: 100%;">
+              <mRecisit v-if="lastViewportTaskId && criterionType === 7 && lastViewportTaskIds.includes(s.VisitTaskId)"
                 :ref="`ecrf_${s.VisitTaskId}`"
                 :reading-task-state="currentVisitInfo.VisitTaskId === taskInfo.VisitTaskId ? readingTaskState : 2"
-                :last-viewport-task-id="lastViewportTaskId"
-                :visit-info="s"
-                @removeAnnotation="removeAnnotation"
-                @getScreenshots="getScreenshots"
-                @setMarkName="setMarkName"
-                @imageLocation="imageLocation"
-                @resetAnnotations="resetAnnotations"
-                @getAnnotations="getAnnotations"
-                @setToolToTarget="setToolToTarget"
-              />
+                :last-viewport-task-id="lastViewportTaskId" :visit-info="s" @removeAnnotation="removeAnnotation"
+                @getScreenshots="getScreenshots" @setMarkName="setMarkName" @imageLocation="imageLocation"
+                @resetAnnotations="resetAnnotations" @getAnnotations="getAnnotations"
+                @setToolToTarget="setToolToTarget" />
               <recisit
                 v-else-if="lastViewportTaskId && criterionType === 1 && lastViewportTaskIds.includes(s.VisitTaskId)"
                 :ref="`ecrf_${s.VisitTaskId}`"
                 :reading-task-state="currentVisitInfo.VisitTaskId === taskInfo.VisitTaskId ? readingTaskState : 2"
-                :last-viewport-task-id="lastViewportTaskId"
-                :visit-info="s"
-                @removeAnnotation="removeAnnotation"
-                @getScreenshots="getScreenshots"
-                @setMarkName="setMarkName"
-                @imageLocation="imageLocation"
-                @resetAnnotations="resetAnnotations"
-                @getAnnotations="getAnnotations"
-                @setToolToTarget="setToolToTarget"
-              />
+                :last-viewport-task-id="lastViewportTaskId" :visit-info="s" @removeAnnotation="removeAnnotation"
+                @getScreenshots="getScreenshots" @setMarkName="setMarkName" @imageLocation="imageLocation"
+                @resetAnnotations="resetAnnotations" @getAnnotations="getAnnotations"
+                @setToolToTarget="setToolToTarget" />
               <customize-question-list
                 v-else-if="lastViewportTaskId && criterionType === 0 && lastViewportTaskIds.includes(s.VisitTaskId)"
                 :ref="`ecrf_${s.VisitTaskId}`"
                 :reading-task-state="taskInfo && currentVisitInfo.VisitTaskId === taskInfo.VisitTaskId ? readingTaskState : 2"
-                :last-viewport-task-id="lastViewportTaskId"
-                :visit-info="s"
-                @resetAnnotations="resetAnnotations"
-                @setReadingTaskState="setReadingTaskState"
-                @viewCustomAnnotationSeries="viewCustomAnnotationSeries"
-                @getCustomScreenshots="getCustomScreenshots"
-                @setReadingToolActive="setReadingToolActive"
-                @setReadingToolPassive="setReadingToolPassive"
-              />
+                :last-viewport-task-id="lastViewportTaskId" :visit-info="s" @resetAnnotations="resetAnnotations"
+                @setReadingTaskState="setReadingTaskState" @viewCustomAnnotationSeries="viewCustomAnnotationSeries"
+                @getCustomScreenshots="getCustomScreenshots" @setReadingToolActive="setReadingToolActive"
+                @setReadingToolPassive="setReadingToolPassive" />
             </div>
           </div>
         </div>
@@ -483,30 +348,21 @@
     </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 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"
-    >
+    <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="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>
@@ -515,13 +371,8 @@
       </div>
     </el-dialog>
     <!-- 个性化配置 -->
-    <el-dialog
-      v-if="personalConfigDialog.visible"
-      :visible.sync="personalConfigDialog.visible"
-      :close-on-click-modal="false"
-      :title="personalConfigDialog.title"
-      width="600px"
-    >
+    <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">
@@ -539,57 +390,35 @@
 
     </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"
-    >
+    <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" />
+          <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"
-        />
+        <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>
-    <el-dialog
-      :visible.sync="fusionVisible"
-      :close-on-click-modal="false"
-      :title="$t('trials:lugano:button:record')"
-      width="850px"
-    >
-      <FusionForm v-if="fusionVisible" :active-task-index="activeTaskIndex" :task-list="visitTaskList" @close="closeFusion" @fusion="handleFusion" />
+    <el-dialog :visible.sync="fusionVisible" :close-on-click-modal="false" :title="$t('trials:lugano:button:record')"
+      width="850px">
+      <FusionForm v-if="fusionVisible" :active-task-index="activeTaskIndex" :task-list="visitTaskList"
+        @close="closeFusion" @fusion="handleFusion" />
     </el-dialog>
 
-    <upload-dicom-and-nonedicom
-      v-if="uploadImageVisible"
-      :subject-id="uploadSubjectId"
-      :subject-code="uploadSubjectCode"
-      :criterion="uploadTrialCriterion"
-      :visible.sync="uploadImageVisible"
-      :visit-task-id="taskId"
-      :is-reading-task-view-in-order="isReadingTaskViewInOrder"
-    />
-    <download-dicom-and-nonedicom
-      v-if="downloadImageVisible"
-      :subject-id="uploadSubjectId"
-      :subject-code="uploadSubjectCode"
-      :criterion="uploadTrialCriterion"
-      :task-id="taskId"
-      :visible.sync="downloadImageVisible"
-    />
+    <upload-dicom-and-nonedicom v-if="uploadImageVisible" :subject-id="uploadSubjectId"
+      :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :visible.sync="uploadImageVisible"
+      :visit-task-id="taskId" :is-reading-task-view-in-order="isReadingTaskViewInOrder" />
+    <download-dicom-and-nonedicom v-if="downloadImageVisible" :subject-id="uploadSubjectId"
+      :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :task-id="taskId"
+      :visible.sync="downloadImageVisible" />
   </div>
 </template>
 <script>
@@ -825,7 +654,7 @@ export default {
     },
   },
   watch: {
-    currentReadingTaskState(){console.log(this.currentReadingTaskState,'currentReadingTaskState')},
+    currentReadingTaskState() { console.log(this.currentReadingTaskState, 'currentReadingTaskState') },
     activeTaskId: {
       immediate: true,
       handler(id) {
@@ -883,7 +712,7 @@ export default {
       this.tools = getCustomizeStandardsTools(this.taskInfo.ReadingToolList)
       const toolNames = this.tools.map(i => i.toolName)
       this.customizeStandards = config.customizeStandards.filter(item => !toolNames.includes(item.toolName))
-      console.log(this.customizeStandards,'this.customizeStandards')
+      console.log(this.customizeStandards, 'this.customizeStandards')
     } else {
       this.tools = getTools(this.criterionType)
     }
@@ -978,7 +807,7 @@ export default {
     },
     // 加载检查及标注信息
     async loadTaskDetails(taskInfo, taskIndex) {
-      return new Promise(async(resolve, reject) => {
+      return new Promise(async (resolve, reject) => {
         try {
           const sujectVisitId = taskInfo.VisitId
           const taskId = taskInfo.VisitTaskId
@@ -1242,10 +1071,10 @@ export default {
         toolGroup.addTool(PlanarRotateTool.toolName)
         toolGroup.addTool(ArrowAnnotateTool.toolName, {
           arrowHeadStyle: 'standard',
-          changeTextCallback: async(data, eventData, doneChangingTextCallback) => {
+          changeTextCallback: async (data, eventData, doneChangingTextCallback) => {
             return doneChangingTextCallback(data.text)
           },
-          getTextCallback: async(doneChangingTextCallback) => {
+          getTextCallback: async (doneChangingTextCallback) => {
             return doneChangingTextCallback('Annotation')
           }
         })
@@ -1300,6 +1129,13 @@ export default {
             ]
           })
         }
+        toolGroup.setToolConfiguration(
+          ScaleOverlayTool.toolName,
+          {
+            scaleLocation: 'bottom'
+          },
+          true // overwrite
+        )
         toolGroup.setToolActive(StackScrollTool.toolName, {
           bindings: [{ mouseButton: MouseBindings.Wheel }]
         })
@@ -1513,9 +1349,9 @@ export default {
     },
     annotationRemovedListener(e) {
       const { annotation } = e.detail
-      try{
+      try {
         if (!annotation) return
-        if (this. readingTaskState === 2 && !annotation.data.label) return false
+        if (this.readingTaskState === 2 && !annotation.data.label) return false
         if (this.readingTaskState === 2) {
           const errorMsg = { message: 'annotation Not allowed to operate' }
           throw errorMsg
@@ -1577,7 +1413,7 @@ export default {
               clearTimeout(this.saveCustomAnnotationTimer)
               this.saveCustomAnnotationTimer = null
             }
-            this.saveCustomAnnotationTimer = setTimeout(()=>{this.saveCustomAnnotation(annotation)},500)
+            this.saveCustomAnnotationTimer = setTimeout(() => { this.saveCustomAnnotation(annotation) }, 500)
           }
         } else {
           // if (this.isNumber(operateStateEnum)) {
@@ -1598,29 +1434,29 @@ export default {
         const measureData = Object.assign({}, annotation)
         const params = {}
         await this.getScreenshots({
-            visitTaskId: this.visitTaskId,
-            annotation
-          },async (base64Str) =>{
-            const pictureObj = await this.uploadScreenshots(`${Date.now()}`, base64Str)
-            let picturePath = pictureObj.isSuccess ? this.$getObjectName(pictureObj.result.url) : ''
-            params.PicturePath = picturePath
-            params.MarkTool = measureData.markTool
-            params.OrderMarkName = measureData.data.label
-            params.VisitTaskId = this.taskInfo.VisitTaskId
-            params.StudyId = annotation.studyId
-            params.SeriesId = annotation.seriesId
-            params.InstanceId = annotation.instanceId
-            params.Id = annotation.id ? annotation.id : ''
-            params.MeasureData = JSON.stringify(measureData)
-            params.NumberOfFrames = annotation.numberOfFrames
-            params.MarkId = annotation.annotationUID
-            const res = await submitCustomTag(params)
-            annotation.id = res.Result
-            annotation.markId = params.MarkId
-          })
-        
+          visitTaskId: this.visitTaskId,
+          annotation
+        }, async (base64Str) => {
+          const pictureObj = await this.uploadScreenshots(`${Date.now()}`, base64Str)
+          let picturePath = pictureObj.isSuccess ? this.$getObjectName(pictureObj.result.url) : ''
+          params.PicturePath = picturePath
+          params.MarkTool = measureData.markTool
+          params.OrderMarkName = measureData.data.label
+          params.VisitTaskId = this.taskInfo.VisitTaskId
+          params.StudyId = annotation.studyId
+          params.SeriesId = annotation.seriesId
+          params.InstanceId = annotation.instanceId
+          params.Id = annotation.id ? annotation.id : ''
+          params.MeasureData = JSON.stringify(measureData)
+          params.NumberOfFrames = annotation.numberOfFrames
+          params.MarkId = annotation.annotationUID
+          const res = await submitCustomTag(params)
+          annotation.id = res.Result
+          annotation.markId = params.MarkId
+        })
+
       } catch (e) {
-         this.loading = false
+        this.loading = false
         console.log(e)
       }
     },
@@ -1647,7 +1483,7 @@ export default {
             clearTimeout(this.saveCustomAnnotationTimer)
             this.saveCustomAnnotationTimer = null
           }
-          this.saveCustomAnnotationTimer = setTimeout(()=>{this.saveCustomAnnotation(annotation)},1000)
+          this.saveCustomAnnotationTimer = setTimeout(() => { this.saveCustomAnnotation(annotation) }, 1000)
         }
       }
       this.setToolsPassive()
@@ -1685,11 +1521,11 @@ export default {
               '?'
             )
             if (annotation.markId) {
-            let res = await deleteCustomTag(annotation.markId)
-            if (!res.IsSuccess) throw ''
-            }else if (annotation.id) {
-            let res = await deleteCustomTag(annotation.id)
-            if (!res.IsSuccess) throw ''
+              let res = await deleteCustomTag(annotation.markId)
+              if (!res.IsSuccess) throw ''
+            } else if (annotation.id) {
+              let res = await deleteCustomTag(annotation.id)
+              if (!res.IsSuccess) throw ''
             }
           }
           const index = this.markedSeriesIds.indexOf(annotation.seriesId)
@@ -1739,7 +1575,7 @@ export default {
         }
       }
     },
-    annotationSelectionChangeListener(e) {},
+    annotationSelectionChangeListener(e) { },
     async getAnnotations(visitTaskId) {
       if (this.readingTaskState === 2) return
       const taskIdx = this.visitTaskList.findIndex(i => i.VisitTaskId === visitTaskId)
@@ -1936,7 +1772,7 @@ export default {
       if (length === undefined) {
         return textLines
       }
-      
+
       textLines.push(
         `L: ${parseFloat(length).toFixed(this.digitPlaces)} ${unit || unit}`,
         `S: ${parseFloat(width).toFixed(this.digitPlaces)} ${unit}`
@@ -2036,7 +1872,7 @@ export default {
     processSingle(str, precision) {
       const num = parseFloat(str)
       if (isNaN(num)) return 'NaN'
-      
+
       // 保留原极小值处理逻辑
       if (Math.abs(num) < 0.0001) return str
       const factor = 10 ** precision
@@ -2330,7 +2166,7 @@ export default {
       } else {
         const lower = v.wc - v.ww / 2
         const upper = v.wc + v.ww / 2 - 1
-        viewport.setProperties({ voiRange: { upper: upper, lower: lower }})
+        viewport.setProperties({ voiRange: { upper: upper, lower: lower } })
         viewport.render()
       }
     },
@@ -2345,7 +2181,7 @@ export default {
       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.setProperties({ voiRange: { upper: upper, lower: lower } })
       viewport.render()
       this.customWwc.visible = false
     },
@@ -2975,7 +2811,7 @@ export default {
         // if (isShowCancelButton) {
         //   message = `<div><p>${this.$t('trials:noneDicom:message:msg1')}</p><p style='font-size:12px' class='customPromptTip'>${this.$t('trials:noneDicom:message:saveTip')}</p></div>`
         // }
-        const { value } = await this.$prompt( message, '', {
+        const { value } = await this.$prompt(message, '', {
           showClose: false,
           cancelButtonText: isShowCancelButton ? this.$t('trials:reading:button:temporarySave') : this.$t('common:button:cancel'),
           confirmButtonText: isShowCancelButton ? this.$t('trials:reading:button:enduringSave') : this.$t('trials:reading:button:relevancy'),
@@ -2984,7 +2820,7 @@ export default {
           inputValidator: (res) => {
             if (!res) {
               return isShowCancelButton ? this.$t('trials:noneDicom:message:saveTip') : this.$t('trials:noneDicom:message:saveTipByRelevancy')
-            } 
+            }
           },
           inputErrorMessage: this.$t('trials:noneDicom:message:saveTip'),
           showCancelButton: true,
@@ -3006,7 +2842,7 @@ export default {
           }
         })
         return value
-      } catch(err) {
+      } catch (err) {
         console.log(err)
         return null
       }
@@ -3023,7 +2859,7 @@ export default {
     },
     debounce(callback, delay) {
       let timerId
-      return function() {
+      return function () {
         clearTimeout(timerId)
         timerId = setTimeout(() => {
           callback.apply(this, arguments)
@@ -3240,7 +3076,7 @@ export default {
         .then((res) => {
           this.trialCriterion = res.Result
         })
-        .catch(() => {})
+        .catch(() => { })
     },
     async uploadScreenshots(fileName, file) {
       try {
@@ -3299,370 +3135,431 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  .read-page-container {
-    box-sizing: border-box;
-    height: 100%;
+.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: 5px;
-      height: 5px;
+      width: 3px;
+      height: 3px;
     }
+
     ::-webkit-scrollbar-thumb {
       border-radius: 10px;
       background: #d0d0d0;
     }
-    .left-panel {
+
+    .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;
-      width: 200px;
-      border: 1px solid #727272;
-      color: #fff;
-      user-select: none;
-      ::-webkit-scrollbar {
-        width: 3px;
-        height: 3px;
+
+      .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;
       }
-      ::-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;
+
+      .task-item-active {
+        background-color: #607d8b;
+        border: 1px solid #607d8b;
       }
     }
-    .middle-panel {
-      flex: 1;
-      border: 1px solid #727272;
-      margin: 0 5px;
+
+    .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;
-      .dicom-viewer {
+
+      .tools-wrapper {
+        height: 50px;
         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;
-              }
-            }
-          }
-          .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;
-            }
-          }
-          // .icon:hover{
-          //   background-color: #607d8b;
-          // }
-          .dropdown {
-            position: relative;
-            display: inline-block;
-            .text{
-              text-align: center;
-            }
-          }
-          .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #383838;
-            color: #fff;
-            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-            z-index: 9999;
-            font-size: 12px;
-            ul{
-              list-style: none;
-              margin: 0;
-              padding: 0;
-              text-align: center;
-              li{
-                a{
-                  display: block;
-                  padding: 5px;
-                }
-              }
-            }
-            ul li a:hover{
-              background-color: #727272;
-            }
-          }
-          .layout-content-ul li:hover{
-            background-color: #727272;
-          }
-          .layout-content ul li{
-            border-top:1px solid #ddd;
-            border-left:1px solid #ddd;
-          }
-          .layout_flex_row {
-            display: flex;
-            justify-content: space-between;
-            flex-direction: row;
-            align-items: center;
-            text-align: center;
-            margin-bottom: 2px;
-          }
-          .layout_flex_column{
-            display: flex;
-            justify-content: space-between;
-            flex-direction: column;
-            align-items: center;
-            margin-bottom: 2px;
-          }
-          .layout_box_1_1{
-            flex:1;
-            line-height: 30px;
-            font-size: 12px;
-            text-align: center;
-            border-bottom:1px solid #ddd;
-            border-right:1px solid #ddd;
-          }
-          .layout_box_1_2{
-            flex:1;
-            line-height: 15px;
-            font-size: 10px;
-            text-align: center;
-            border-bottom:1px solid #ddd;
-            border-right:1px solid #ddd;
-          }
-          .divider{
-            display: block;
-            height: 1px;
-            width: 100%;
-            margin: 10px 0;
-          }
-          .el-divider__text{
-            padding: 0 10px;
-            font-size: 12px;
-            width: 80px;
-            background-color: #383838;
-            color: #fff;
-          }
-        }
-        .content-wrapper {
+        align-items: center;
+        border-bottom: 1px solid #727272;
+        color: #ddd;
+        padding: 0 5px;
+
+        .tools-left {
           flex: 1;
-          height: calc(100% - 50px);
           display: flex;
           flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
         }
-        .viewports-wrapper {
-          flex: 1;
-          .grid-container {
-            display: grid;
-            height: 100%;
-            width: 100%;
+
+        .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;
+            }
+          }
+        }
+
+        .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;
-          }
-          .viewports-box {
-            display: grid;
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            z-index: 9;
-          }
-          .viewports-box-down{
-            z-index: 1;
-          }
-          .grid-cell {
-            border: 1px dashed #ccc;;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1;
-          }
-          .cell_active {
-            border-color: #fafa00!important;
-          }
-          .cell-full-screen {
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-            z-index: 9;
+            font-size: 12px;
+            margin-top: 5px;
+            color: #d0d0d0;
+            display: none;
           }
         }
-        .form-wrapper {
-          width: 400px;
-          height: 100%;
-          border: 1px solid #727272;
-          user-select: none;
+
+        // .icon:hover{
+        //   background-color: #607d8b;
+        // }
+        .dropdown {
+          position: relative;
+          display: inline-block;
+
+          .text {
+            text-align: center;
+          }
+        }
+
+        .dropdown-content {
+          display: none;
+          position: absolute;
+          background-color: #383838;
+          color: #fff;
+          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+          z-index: 9999;
+          font-size: 12px;
+
+          ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+
+            li {
+              a {
+                display: block;
+                padding: 5px;
+              }
+            }
+          }
+
+          ul li a:hover {
+            background-color: #727272;
+          }
+        }
+
+        .layout-content-ul li:hover {
+          background-color: #727272;
+        }
+
+        .layout-content ul li {
+          border-top: 1px solid #ddd;
+          border-left: 1px solid #ddd;
+        }
+
+        .layout_flex_row {
+          display: flex;
+          justify-content: space-between;
+          flex-direction: row;
+          align-items: center;
+          text-align: center;
+          margin-bottom: 2px;
+        }
+
+        .layout_flex_column {
+          display: flex;
+          justify-content: space-between;
+          flex-direction: column;
+          align-items: center;
+          margin-bottom: 2px;
+        }
+
+        .layout_box_1_1 {
+          flex: 1;
+          line-height: 30px;
+          font-size: 12px;
+          text-align: center;
+          border-bottom: 1px solid #ddd;
+          border-right: 1px solid #ddd;
+        }
+
+        .layout_box_1_2 {
+          flex: 1;
+          line-height: 15px;
+          font-size: 10px;
+          text-align: center;
+          border-bottom: 1px solid #ddd;
+          border-right: 1px solid #ddd;
+        }
+
+        .divider {
+          display: block;
+          height: 1px;
+          width: 100%;
+          margin: 10px 0;
+        }
+
+        .el-divider__text {
+          padding: 0 10px;
+          font-size: 12px;
+          width: 80px;
+          background-color: #383838;
+          color: #fff;
         }
       }
-    }
 
-    .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;
-      }
-    }
-    ::v-deep .el-dropdown-menu{
-      .el-dropdown-menu__item {
-        padding: 0 5px;
-      }
-      .layout_flex_row {
+      .content-wrapper {
+        flex: 1;
+        height: calc(100% - 50px);
         display: flex;
-        justify-content: space-between;
         flex-direction: row;
-        align-items: center;
-        width: 40px;
-        align-items: center;
-        text-align: center;
       }
-      .layout_flex_column{
-        display: flex;
-        justify-content: space-between;
-        flex-direction: column;
-        align-items: center;
+
+      .viewports-wrapper {
+        flex: 1;
+
+        .grid-container {
+          display: grid;
+          height: 100%;
+          width: 100%;
+          position: relative;
+        }
+
+        .viewports-box {
+          display: grid;
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          z-index: 9;
+        }
+
+        .viewports-box-down {
+          z-index: 1;
+        }
+
+        .grid-cell {
+          border: 1px dashed #ccc;
+          ;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1;
+        }
+
+        .cell_active {
+          border-color: #fafa00 !important;
+        }
+
+        .cell-full-screen {
+          grid-column: 1 / -1;
+          grid-row: 1 / -1;
+          z-index: 9;
+        }
       }
-      .layout_box_1_1{
-        flex:1;
-        line-height: 30px;
-        font-size: 12px;
-        text-align: center;
-        // border-bottom:1px solid #ddd;
-        // border-right:1px solid #ddd;
-      }
-      .layout_box_1_2{
-        flex:1;
-        line-height: 15px;
-        font-size: 10px;
-        text-align: center;
-        // border-bottom:1px solid #ddd;
-        // border-right:1px solid #ddd;
+
+      .form-wrapper {
+        width: 400px;
+        height: 100%;
+        border: 1px solid #727272;
+        user-select: none;
       }
     }
   }
 
+  .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;
+    }
+  }
+
+  ::v-deep .el-dropdown-menu {
+    .el-dropdown-menu__item {
+      padding: 0 5px;
+    }
+
+    .layout_flex_row {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: center;
+      width: 40px;
+      align-items: center;
+      text-align: center;
+    }
+
+    .layout_flex_column {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .layout_box_1_1 {
+      flex: 1;
+      line-height: 30px;
+      font-size: 12px;
+      text-align: center;
+      // border-bottom:1px solid #ddd;
+      // border-right:1px solid #ddd;
+    }
+
+    .layout_box_1_2 {
+      flex: 1;
+      line-height: 15px;
+      font-size: 10px;
+      text-align: center;
+      // border-bottom:1px solid #ddd;
+      // border-right:1px solid #ddd;
+    }
+  }
+}
 </style>
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReportPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReportPage.vue
index 4adf0b6e..c1fd2a45 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReportPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReportPage.vue
@@ -255,7 +255,7 @@ export default {
     ...mapGetters(['language']),
     isBaseline() {
       var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
-      return this.visitTaskList[i].IsBaseLine
+      return this.visitTaskList[i] ? this.visitTaskList[i].IsBaseLine : false
     }
   },
   watch: {
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
index f37090b0..0a3adcd5 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
@@ -1,59 +1,34 @@
 <template>
-  <div
-    ref="viewport"
-    class="viewport-wrapper"
-    v-loading="loading"
-    :element-loading-text="NSTip"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    @mouseup="sliderMouseup"
-    @mousemove="sliderMousemove"
-    @mouseleave="sliderMouseleave"
-  >
+  <div ref="viewport" class="viewport-wrapper" v-loading="loading" :element-loading-text="NSTip"
+    element-loading-background="rgba(0, 0, 0, 0.8)" @mouseup="sliderMouseup" @mousemove="sliderMousemove"
+    @mouseleave="sliderMouseleave">
     <div v-if="series && taskInfo" class="left-top-text">
-      <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 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"
-      >
+      <h2 v-if="taskInfo.IsReadingShowSubjectInfo" class="subject-info">
         {{ `${series.TaskInfo.SubjectCode} ${series.TaskInfo.TaskBlindName} ` }}
       </h2>
       <div>Series: #{{ series.SeriesNumber }}</div>
       <div v-if="series.Stack">Image: #{{ `${series.SliceIndex + 1}/${series.Stack.length}` }}</div>
       <div>{{ series.Modality }}</div>
     </div>
-    <div
-      v-if="series && taskInfo && taskInfo.IsReadingTaskViewInOrder === 1"
-      class="top-center-tool"
-    >
+    <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' }"
+        <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)"
-        >
+          @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' }"
+        <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)"
-        >
+          @dblclick.stop="preventDefault($event)">
           <i class="el-icon-caret-right" />
         </div>
       </div>
@@ -65,11 +40,13 @@
       <div v-show="mousePosition.index.length > 0">
         Pos: {{ mousePosition.index[0] }}, {{ mousePosition.index[1] }}
       </div>
-      <div v-if="(series.Modality === 'CT' || series.Modality === 'DR' || series.Modality === 'CR') && mousePosition.value">
+      <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)">
-        {{mousePosition.modalityUnit}}: {{ digitPlaces === -1 ?mousePosition.value.toFixed(3) :mousePosition.value.toFixed(digitPlaces) }}
+        {{ mousePosition.modalityUnit }}: {{ digitPlaces === -1 ? mousePosition.value.toFixed(3)
+          : mousePosition.value.toFixed(digitPlaces) }}
       </div>
       <div v-else-if="mousePosition.value">
         Density: {{ mousePosition.value }}
@@ -83,8 +60,9 @@
     </div>
     <div v-if="series" class="right-bottom-text">
       <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 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 }}
@@ -100,7 +78,8 @@
       {{ 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 :style="{ top: sliderInfo.height + '%' }" class="slider" @click.stop.prevent="() => { return }"
+        @mousedown.stop="sliderMousedown($event)" />
     </div>
   </div>
 </template>
@@ -195,7 +174,7 @@ export default {
       this.element.addEventListener('CORNERSTONE_STACK_NEW_IMAGE', this.stackNewImage)
       // this.element.addEventListener('CORNERSTONE_VOI_MODIFIED', this.voiModified)
       // this.element.addEventListener('CORNERSTONE_CAMERA_MODIFIED', this.cameraModified)
-      
+
       this.element.addEventListener('CORNERSTONE_IMAGE_RENDERED', this.imageRendered)
       this.element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.cornerstoneToolsMouseMove)
       this.element.addEventListener('mouseleave', () => {
@@ -219,9 +198,9 @@ export default {
       // this.imageInfo.wwwc = `${Math.round(detail.image.windowWidth)}/${Math.round(detail.image.windowCenter)}`
       this.getOrientationMarker()
       this.$emit('renderAnnotations', this.series)
-      // const toolGroupId = `viewport-${this.viewportIndex}`
-      // const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
-      // toolGroup.setToolEnabled('ScaleOverlay')
+      const toolGroupId = this.viewportId
+      const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId)
+      toolGroup.setToolEnabled('ScaleOverlay')
     },
     imageRendered(e) {
       const renderingEngine = getRenderingEngine(this.renderingEngineId)
@@ -385,7 +364,7 @@ export default {
       }
     },
     cachePTMetadata(images) {
-      images.map(i=>{
+      images.map(i => {
         const instanceMetadata = getPTImageIdInstanceMetadata(i.imageId)
         if (typeof instanceMetadata.CorrectedImage === 'string') {
           instanceMetadata.CorrectedImage = instanceMetadata.CorrectedImage.split('\\')
@@ -416,7 +395,7 @@ export default {
         }
         this.prefetchMetadataInformation(obj.ImageIds, obj.Modality)
         await viewport.setStack(this.series.Stack, obj.SliceIndex)
-        
+
         viewport.render()
       } catch (e) {
         console.log(e)
@@ -549,10 +528,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 .viewport-wrapper {
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
   position: relative;
   cursor: default !important;
+
   .left-top-text {
     position: absolute;
     left: 5px;
@@ -560,26 +540,31 @@ export default {
     color: #ddd;
     z-index: 1;
     font-size: 12px;
+
     .cd-info {
       color: #ddd;
       font-size: 18px;
     }
+
     .subject-info {
-      color:#f44336;
+      color: #f44336;
       padding: 5px 0px;
       margin: 0;
     }
   }
+
   .top-center-tool {
     position: absolute;
-    left:50%;
+    left: 50%;
     top: 5px;
     transform: translateX(-50%);
     z-index: 1;
+
     .toggle-visit-container {
       display: flex;
     }
-    .arrw_icon{
+
+    .arrw_icon {
       width: 20px;
       height: 20px;
       background-color: #3f3f3f;
@@ -587,15 +572,17 @@ export default {
       line-height: 20px;
       border-radius: 10%;
     }
-    .arrow_text{
+
+    .arrow_text {
       height: 20px;
       line-height: 20px;
       background-color: #00000057;
       color: #fff;
-      padding:0 10px;
+      padding: 0 10px;
       font-size: 14px;
     }
   }
+
   .right-top-text {
     position: absolute;
     right: 5px;
@@ -604,6 +591,7 @@ export default {
     z-index: 1;
     font-size: 12px;
   }
+
   .left-bottom-text {
     position: absolute;
     left: 5px;
@@ -612,6 +600,7 @@ export default {
     z-index: 1;
     font-size: 12px;
   }
+
   .right-bottom-text {
     position: absolute;
     right: 5px;
@@ -620,6 +609,7 @@ export default {
     z-index: 1;
     font-size: 12px;
   }
+
   .right-slider-box {
     position: absolute;
     right: 1px;
@@ -631,7 +621,8 @@ export default {
     z-index: 1;
     cursor: pointer;
   }
-  .right-slider-box:after{
+
+  .right-slider-box:after {
     content: '';
     position: absolute;
     bottom: -20px;
@@ -640,15 +631,17 @@ export default {
     width: 100%;
     background: #333;
   }
+
   .slider {
     height: 20px;
     width: 100%;
     position: absolute;
     top: 0;
-    z-index:10;
+    z-index: 10;
     background: #9e9e9e;
     cursor: move
   }
+
   .orientation-top {
     position: absolute;
     left: 50%;
@@ -657,6 +650,7 @@ export default {
     transform: translateX(-50%);
     z-index: 1;
   }
+
   .orientation-bottom {
     position: absolute;
     left: 50%;
@@ -665,6 +659,7 @@ export default {
     transform: translateX(-50%);
     z-index: 1;
   }
+
   .orientation-left {
     position: absolute;
     top: 50%;
@@ -673,6 +668,7 @@ export default {
     transform: translateY(-50%);
     z-index: 1;
   }
+
   .orientation-right {
     position: absolute;
     top: 50%;