diff --git a/src/api/trials.js b/src/api/trials.js
index 31c03293..f9c572d1 100644
--- a/src/api/trials.js
+++ b/src/api/trials.js
@@ -3940,8 +3940,6 @@ export function updateTrialUserRole(data) {
   })
 }
 
-
-
 // 获取报表配置
 export function getTrialQuestionExportResult(data) {
   return request({
@@ -3965,4 +3963,29 @@ export function trialUserSendJoinEmail(data) {
     method: 'post',
     data
   })
-}
\ No newline at end of file
+}
+
+// 获取非Dicom标记
+export function getNoneDicomMarkListOutDto(data) {
+  return request({
+    url: `/ReadingImageTask/getNoneDicomMarkListOutDto`,
+    method: 'post',
+    data
+  })
+}
+// 添加非Dicom标记
+export function addNoneDicomMark(data) {
+  return request({
+    url: `/ReadingImageTask/addNoneDicomMark`,
+    method: 'post',
+    data
+  })
+}
+// 删除非Dicom标记
+export function deleteTrialFileType(id) {
+  return request({
+    url: `/ReadingImageTask/deleteTrialFileType/${id}`,
+    method: 'post'
+  })
+}
+
diff --git a/src/permission.js b/src/permission.js
index ea78a655..e0f2cc8f 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -7,15 +7,15 @@ import 'nprogress/nprogress.css'
 import { getToken, removeToken } from '@/utils/auth'
 import Vue from 'vue'
 import { OSSclient } from './utils/oss'
-import WHITELIST from "./utils/whiteList"
+import WHITELIST from './utils/whiteList'
 import { getTrialExtralConfig } from '@/api/trials'
 // import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false })
 
 const whiteList = WHITELIST
-store.state.trials.whiteList = whiteList;
-router.beforeEach(async (to, from, next) => {
+store.state.trials.whiteList = whiteList
+router.beforeEach(async(to, from, next) => {
   NProgress.start()
   // 设置页面标题
   // document.title = getPageTitle(to.meta.title) store.state.trials.whiteList.indexOf(to.path) === -1
@@ -27,13 +27,13 @@ router.beforeEach(async (to, from, next) => {
     to.query.trialId !==
     store.state.trials.config.trialId
   ) {
-    let res = await getTrialExtralConfig({
-      TrialId: to.query.trialId,
+    const res = await getTrialExtralConfig({
+      TrialId: to.query.trialId
     })
     if (res.IsSuccess) {
       store.dispatch('trials/setConfig', {
         trialId: to.query.trialId,
-        ...res.Result,
+        ...res.Result
       })
     }
   }
@@ -45,13 +45,13 @@ router.beforeEach(async (to, from, next) => {
     to.query.trialId !==
     store.state.trials.config.trialId
   ) {
-    let res = await getTrialExtralConfig({
-      TrialId: to.query.trialId,
+    const res = await getTrialExtralConfig({
+      TrialId: to.query.trialId
     })
     if (res.IsSuccess) {
       store.dispatch('trials/setConfig', {
         trialId: to.query.trialId,
-        ...res.Result,
+        ...res.Result
       })
     }
   }
@@ -72,12 +72,12 @@ router.beforeEach(async (to, from, next) => {
       NProgress.done()
     } else if (from.path === '/researchForm') {
       removeToken()
-      let lang = to.query.lang || zzSessionStorage.getItem('lang')
+      const lang = to.query.lang || zzSessionStorage.getItem('lang')
       next(`/researchLogin?trialId=${to.query.trialId}&lang=${lang}`)
       NProgress.done()
     } else if (from.path === '/researchDetail_m') {
       removeToken()
-      let lang = to.query.lang || zzSessionStorage.getItem('lang')
+      const lang = to.query.lang || zzSessionStorage.getItem('lang')
       next(`/researchLogin_m?trialId=${to.query.trialId}&lang=${lang}`)
       NProgress.done()
     } else {
@@ -107,7 +107,7 @@ router.beforeEach(async (to, from, next) => {
     /* has no token*/
     if (whiteList.indexOf(to.path) !== -1) {
       if (to.path === '/researchLogin') {
-        let lang = to.query.lang || zzSessionStorage.getItem('lang')
+        const lang = to.query.lang || zzSessionStorage.getItem('lang')
         const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
         if (flag) {
           next(`/researchLogin_m?trialId=${to.query.trialId}&lang=${lang}`)
@@ -123,11 +123,11 @@ router.beforeEach(async (to, from, next) => {
       }
     } else {
       if (to.path === '/researchForm') {
-        let lang = to.query.lang || zzSessionStorage.getItem('lang')
+        const lang = to.query.lang || zzSessionStorage.getItem('lang')
         next(`/researchLogin?trialId=${to.query.trialId}&lang=${lang}`)
         NProgress.done()
       } else if (to.path === '/researchDetail_m') {
-        let lang = to.query.lang || zzSessionStorage.getItem('lang')
+        const lang = to.query.lang || zzSessionStorage.getItem('lang')
         next(`/researchLogin_m?trialId=${to.query.trialId}&lang=${lang}`)
         NProgress.done()
       } else if (to.path === '/ReviewersResearchForm') {
diff --git a/src/views/trials/trials-panel/reading/none-dicoms/index-.vue b/src/views/trials/trials-panel/reading/none-dicoms/index--.vue
similarity index 100%
rename from src/views/trials/trials-panel/reading/none-dicoms/index-.vue
rename to src/views/trials/trials-panel/reading/none-dicoms/index--.vue
diff --git a/src/views/trials/trials-panel/reading/visit-review/components/ImageViewer.vue b/src/views/trials/trials-panel/reading/visit-review/components/ImageViewer.vue
index c8601ae3..1d41a282 100644
--- a/src/views/trials/trials-panel/reading/visit-review/components/ImageViewer.vue
+++ b/src/views/trials/trials-panel/reading/visit-review/components/ImageViewer.vue
@@ -2,17 +2,75 @@
   <div class="none-dicom-viewer">
     <!-- tools -->
     <div class="tools-wrapper">
-      <el-dropdown @command="handleCommand">
-        <span class="el-dropdown-link">
-          <i class="el-icon-menu" /><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 class="tool-item" :title="$t('trials:reading:button:layout')">
+        <el-dropdown @command="handleCommand">
+          <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 === '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', readingTaskState === 2 ? 'tool-disabled' : '', activeTool === 'ArrowAnnotate' ? 'tool-item-active' : '']"
+        :title="$t('trials:reading:button:arrowAnnotate')"
+        @click.prevent="setAnnotateToolActive('ArrowAnnotate')"
+      >
+        <svg-icon icon-class="arrow" class="svg-icon" />
+      </div>
+      <!-- 清除标注 -->
+      <div
+        :class="['tool-item', readingTaskState === 2 ? 'tool-disabled' : '', activeTool === 'Eraser' ? 'tool-item-active' : '']"
+        :title="$t('trials:dicom-show:Eraser')"
+        @click.prevent="setAnnotateToolActive('Eraser')"
+      >
+        <svg-icon icon-class="clear" class="svg-icon" />
+      </div>
+      <!-- 截图 -->
+      <!-- <div
+        class="tool-item"
+        :title="$t('trials:reading:button:screenShot')"
+        @click.prevent="saveImage"
+      >
+        <svg-icon icon-class="image" class="svg-icon" />
+      </div> -->
+      <!-- 重置 -->
+      <div
+        class="tool-item"
+        :title="$t('trials:reading:button:reset')"
+        @click.prevent="resetViewport"
+      >
+        <svg-icon icon-class="refresh" class="svg-icon" />
+      </div>
     </div>
     <!-- viewports -->
     <div class="viewports-wrapper">
@@ -22,9 +80,11 @@
           v-show="index < cells.length"
           :key="index"
           :style="cellStyle"
-          :class="['grid-cell', index === activeCanvasIndex?'cell_active':'']"
+          :class="['grid-cell', index === activeCanvasIndex ? 'cell_active' : '', index === fullScreenIndex ? 'cell-full-screen' : '']"
+          @dblclick="toggleFullScreen($event, index)"
           @click="activeCanvas(index)"
-          @dblclick="toggleFullScreen(index)"
+          @mouseup="sliderMouseup($event, index)"
+          @mousemove="sliderMousemove($event, index)"
         >
           <div :ref="`canvas-${index}`" class="content">
             <div class="left-top-text">
@@ -70,6 +130,9 @@
                 </div>
               </div>
             </div>
+            <div :ref="`sliderBox-${index}`" class="right-slider-box" @click.stop="clickSlider($event, index)">
+              <div :style="{top: v.height + '%'}" class="slider" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event, index)" />
+            </div>
           </div>
         </div>
       </div>
@@ -77,12 +140,14 @@
   </div>
 </template>
 <script>
+import { addNoneDicomMark, deleteTrialFileType } from '@/api/trials'
 import {
   RenderingEngine,
   Enums,
   imageLoader,
   metaData,
-  getRenderingEngine
+  getRenderingEngine,
+  eventTarget
 } from '@cornerstonejs/core'
 import * as cornerstoneTools from '@cornerstonejs/tools'
 import initLibraries from '@/views/trials/trials-panel/reading/dicoms/components/Fusion/js/initLibraries'
@@ -92,8 +157,17 @@ import { mapGetters } from 'vuex'
 import store from '@/store'
 const { ViewportType } = Enums
 const renderingEngineId = 'myRenderingEngine'
-const { ToolGroupManager, Enums: csToolsEnums, StackScrollTool } = cornerstoneTools
-const { MouseBindings } = csToolsEnums
+const {
+  ToolGroupManager,
+  Enums: csToolsEnums,
+  StackScrollTool,
+  PanTool,
+  ZoomTool,
+  PlanarRotateTool,
+  ArrowAnnotateTool,
+  EraserTool
+} = cornerstoneTools
+const { MouseBindings, Events: toolsEvents } = csToolsEnums
 export default {
   name: 'ImageViewer',
   props: {
@@ -114,7 +188,10 @@ export default {
       layout: '1*2',
       cellsMax: 4,
       viewportInfos: [],
-      taskInfo: null
+      taskInfo: null,
+      activeTool: '',
+      readingTaskState: 2,
+      renderHistoryAnnotationTaskIds: []
     }
   },
   computed: {
@@ -151,6 +228,7 @@ export default {
   },
   mounted() {
     this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
+    this.readingTaskState = this.taskInfo.ReadingTaskState
     if (this.taskInfo.VisitNum > 0) {
       this.rows = 1
       this.cols = 2
@@ -159,12 +237,18 @@ export default {
     this.viewportInfos = Array.from({ length: this.cellsMax }, (_, index) => ({
       index: index,
       taskInfo: '',
+      studyId: '',
       currentImageIdIndex: 0,
       viewportId: `canvas-${index}`,
       currentFileName: '',
-      imageIds: []
+      imageIds: [],
+      oldB: null,
+      oldM: null,
+      isMove: false,
+      height: 0
     }))
     this.initLoader()
+    console.log(cornerstoneTools)
   },
   methods: {
     // 初始化加载器
@@ -221,17 +305,48 @@ export default {
       ]
       const viewportIds = ['canvas-0', 'canvas-1', 'canvas-2', 'canvas-3']
       renderingEngine.setViewports(viewportInputArray)
+      this.addAnnotationListeners()
       cornerstoneTools.addTool(StackScrollTool)
+      cornerstoneTools.addTool(PanTool)
+      cornerstoneTools.addTool(ZoomTool)
+      cornerstoneTools.addTool(PlanarRotateTool)
+      cornerstoneTools.addTool(ArrowAnnotateTool)
+
+      cornerstoneTools.addTool(EraserTool)
+
       viewportIds.forEach((viewportId, i) => {
         const toolGroupId = `canvas-${i}`
         const toolGroup = ToolGroupManager.createToolGroup(toolGroupId)
         toolGroup.addViewport(viewportId, renderingEngineId)
         toolGroup.addTool(StackScrollTool.toolName)
+        toolGroup.addTool(PanTool.toolName)
+        toolGroup.addTool(ZoomTool.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(EraserTool.toolName)
         toolGroup.setToolActive(StackScrollTool.toolName, {
           bindings: [{ mouseButton: MouseBindings.Wheel }]
         })
+        toolGroup.setToolPassive(PanTool.toolName)
+        toolGroup.setToolPassive(ZoomTool.toolName)
+        toolGroup.setToolPassive(PlanarRotateTool.toolName)
+        if (this.readingTaskState < 2) {
+          toolGroup.setToolPassive(ArrowAnnotateTool.toolName)
+        } else {
+          toolGroup.setToolEnabled(ArrowAnnotateTool.toolName)
+        }
+        toolGroup.setToolPassive(EraserTool.toolName)
       })
     },
+
     // 加载图片回调
     stackNewImage(e) {
       const { detail } = e
@@ -241,6 +356,25 @@ export default {
       const obj = this.viewportInfos[i].fileList[detail.imageIdIndex]
       if (!obj) return
       this.viewportInfos[i].currentFileName = obj.FileName
+      this.viewportInfos[i].height = (this.viewportInfos[i].currentImageIdIndex) * 100 / (this.viewportInfos[i].imageIds.length - 1)
+      this.$emit('toggleImage', { taskId: this.viewportInfos[i].taskInfo.VisitTaskId, studyId: this.viewportInfos[i].studyId, imageIndex: detail.imageIdIndex })
+      this.renderHistoryAnnotations(this.viewportInfos[i].taskInfo)
+    },
+    renderHistoryAnnotations(obj) {
+      if (this.renderHistoryAnnotationTaskIds.includes(obj.VisitTaskId)) return
+      this.renderHistoryAnnotationTaskIds.push(obj.VisitTaskId)
+      const arr = []
+      obj.Annotations.map(i => {
+        if (typeof i.MeasureData === 'string') {
+          const annotation = JSON.parse(i.MeasureData)
+          annotation.annotationId = i.Id
+          arr.push(annotation)
+          cornerstoneTools.annotation.state.addAnnotation(annotation)
+          if (obj.ReadingTaskState === 2) {
+            cornerstoneTools.annotation.locking.setAnnotationLocked(annotation.annotationUID)
+          }
+        }
+      })
     },
     // 渲染图片
     async renderImage(imageIds, canvasIndex, sliceIndex) {
@@ -256,10 +390,12 @@ export default {
       if (!obj || Object.keys(obj).length === 0) return
       const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
       if (i === -1) return
-      if (obj.visitTaskInfo.VisitTaskId === this.viewportInfos[i].taskInfo.VisitTaskId) {
+      if (obj.studyId === this.viewportInfos[i].studyId) {
         this.sliceIndex(obj.fileIndex)
       } else {
         this.updateViewportInfos(this.activeCanvasIndex, obj)
+      }
+      if (this.activeCanvasIndex === this.cells.length - 1) {
         store.dispatch('noneDicomReview/setLastViewportTaskId', obj.visitTaskInfo.VisitTaskId)
       }
     },
@@ -268,9 +404,12 @@ export default {
       if (this.activeCanvasIndex === index) return
       const i = this.viewportInfos.findIndex(i => i.index === index)
       if (i === -1) return
-      store.dispatch('noneDicomReview/setLastViewportTaskId', this.viewportInfos[i].taskInfo.VisitTaskId)
       this.activeCanvasIndex = index
-      // this.$emit('toggleTask', this.viewportInfos[i].taskInfo)
+      if (index === this.cells.length - 1) {
+        store.dispatch('noneDicomReview/setLastViewportTaskId', this.viewportInfos[i].taskInfo.VisitTaskId)
+      }
+      this.$emit('toggleTask', this.viewportInfos[i].taskInfo)
+      this.setToolsPassive()
     },
     // 更新视图信息
     updateViewportInfos(index, obj) {
@@ -280,6 +419,7 @@ export default {
       this.viewportInfos[i].currentImageIdIndex = obj.fileIndex
       this.viewportInfos[i].currentFileName = obj.fileInfo.FileName
       this.viewportInfos[i].fileList = obj.fileList
+      this.viewportInfos[i].studyId = obj.studyId
       const imageIds = []
       for (let i = 0; i < obj.fileList.length; i++) {
         const path = obj.fileList[i].Path
@@ -304,6 +444,7 @@ export default {
     },
     // 更改视图布局
     handleCommand(command) {
+      this.fullScreenIndex = null
       this.layout = command
       this.rows = parseInt(command.split('*')[0])
       this.cols = parseInt(command.split('*')[1])
@@ -386,8 +527,9 @@ export default {
       // })
     },
     // 切换全屏
-    toggleFullScreen(index) {
+    toggleFullScreen(e, index) {
       this.fullScreenIndex = this.fullScreenIndex === index ? null : index
+      this.activeCanvasIndex = index
     },
     // 切换任务
     toggleTask(evt, visitTaskNum, i) {
@@ -400,6 +542,178 @@ export default {
       evt.stopPropagation()
       evt.preventDefault()
     },
+    // 激活工具
+    setToolActive(toolName) {
+      const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
+      if (i === -1) return
+      const toolGroupId = `canvas-${this.viewportInfos[i].index}`
+      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
+      const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
+      if (i === -1) return
+      if (this.viewportInfos[i].taskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
+        const toolGroupId = `canvas-${this.viewportInfos[i].index}`
+        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 = ['canvas-0', 'canvas-1', 'canvas-2', 'canvas-3']
+      toolGroupIds.forEach(toolGroupId => {
+        const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
+        toolGroup.setToolPassive(this.activeTool)
+      })
+      this.activeTool = ''
+    },
+    addAnnotationListeners() {
+      eventTarget.addEventListener(
+        toolsEvents.ANNOTATION_MODIFIED,
+        this.annotationModifiedListener
+      )
+      eventTarget.addEventListener(
+        toolsEvents.ANNOTATION_COMPLETED,
+        this.annotationModifiedListener
+      )
+      eventTarget.addEventListener(
+        toolsEvents.ANNOTATION_REMOVED,
+        this.annotationRemovedListener
+      )
+    },
+    async annotationRemovedListener(e) {
+      if (this.readingTaskState === 2) return
+      const { annotation } = e.detail
+      if (!annotation) return
+      if (!annotation.annotationId) return
+      await deleteTrialFileType(annotation.annotationId)
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewport = renderingEngine.getViewport(`canvas-${this.activeCanvasIndex}`)
+      viewport.render()
+      // 删除成功
+    },
+    async annotationModifiedListener(e) {
+      if (this.readingTaskState === 2) return
+      const { annotation } = e.detail
+      if (!annotation) return
+      const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
+      if (i === -1) return
+      if (this.viewportInfos[i].taskInfo.VisitTaskId !== this.taskInfo.VisitTaskId) return
+      const fileName = this.viewportInfos[i].currentFileName
+      const fileList = this.viewportInfos[i].fileList
+      const fileIndex = fileList.findIndex(f => f.FileName === fileName)
+      if (fileIndex === -1) return
+      const params = {
+        id: annotation.annotationId ? annotation.annotationId : '',
+        visitTaskId: this.viewportInfos[i].taskInfo.VisitTaskId,
+        studyId: this.viewportInfos[i].studyId,
+        noneDicomFileId: fileList[fileIndex].Id,
+        path: fileList[fileIndex].Path,
+        measureData: JSON.stringify(annotation)
+      }
+      const res = await addNoneDicomMark(params)
+      if (annotation.annotationId) return
+      annotation.annotationId = res.Result
+      // 保存成功
+      this.$message.success(this.$t('common:message:savedSuccessfully'))
+    },
+    // 重置视图
+    resetViewport() {
+      this.setToolsPassive()
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewportId = `canvas-${this.activeCanvasIndex}`
+      const viewport = (renderingEngine.getViewport(viewportId))
+      viewport.resetCamera({ resetPan: true, resetZoom: true, resetToCenter: true })
+      renderingEngine.render()
+    },
+    // 箭头工具输入标记名称自定义弹窗
+    async customPrompt() {
+      try {
+        const { value } = await this.$prompt('请输入标记名称')
+        return value
+      } catch {
+        return null
+      }
+    },
+    // 滚动条
+    clickSlider(e, index) {
+      const height = e.offsetY * 100 / this.$refs[`sliderBox-${index}`][0].clientHeight
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1) return
+      this.viewportInfos[i].height = height
+      let sliceIdx = Math.trunc(this.viewportInfos[i].imageIds.length * height / 100)
+      sliceIdx = sliceIdx >= this.viewportInfos[i].imageIds.length ? this.viewportInfos[i].imageIds.length - 1 : sliceIdx < 0 ? 0 : sliceIdx
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewport = renderingEngine.getViewport(
+        this.viewportInfos[i].viewportId
+      )
+      viewport.setImageIdIndex(sliceIdx)
+      viewport.render()
+      // this.$emit('toggleImage', { taskId: this.viewportInfos[i].taskInfo.VisitTaskId, studyId: this.viewportInfos[i].studyId, imageIndex: sliceIdx })
+    },
+    sliderMouseup(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1) return
+      this.viewportInfos[i].isMove = false
+    },
+    sliderMousemove(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1) return
+      if (!this.viewportInfos[i].isMove) return
+      const delta = this.viewportInfos[i].oldB - (this.viewportInfos[i].oldM - e.clientY)
+      const boxHeight = this.$refs[`sliderBox-${index}`][0].clientHeight
+      if (delta < 0) return
+      if (delta > boxHeight) return
+      const height = delta * 100 / boxHeight
+      let sliceIdx = Math.trunc(this.viewportInfos[i].imageIds.length * height / 100)
+      sliceIdx = sliceIdx >= this.viewportInfos[i].imageIds.length ? this.viewportInfos[i].imageIds.length - 1 : sliceIdx < 0 ? 0 : sliceIdx
+      this.viewportInfos[i].height = height
+      if (this.viewportInfos[i].currentImageIdIndex !== i) {
+        const renderingEngine = getRenderingEngine(renderingEngineId)
+        const viewport = renderingEngine.getViewport(
+          this.viewportInfos[i].viewportId
+        )
+        viewport.setImageIdIndex(sliceIdx)
+        viewport.render()
+        // this.$emit('toggleImage', { taskId: this.viewportInfos[i].taskInfo.VisitTaskId, studyId: this.viewportInfos[i].studyId, imageIndex: sliceIdx })
+      }
+    },
+    sliderMousedown(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1) return
+      const boxHeight = this.$refs[`sliderBox-${index}`][0].clientHeight
+      this.viewportInfos[i].oldB = parseInt(e.srcElement.style.top) * boxHeight / 100
+      this.viewportInfos[i].oldM = e.clientY
+      this.viewportInfos[i].isMove = true
+      e.stopImmediatePropagation()
+      e.stopPropagation()
+      e.preventDefault()
+    },
     preventDefault(e) {
       e.stopImmediatePropagation()
       e.stopPropagation()
@@ -420,8 +734,26 @@ export default {
   height: 100%;
   user-select: none;
   .tools-wrapper {
-    height: 60px;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
     border-bottom: 1px solid #727272;
+    color: #ddd;
+    .tool-item {
+      padding: 5px;
+      margin: 0 5px;
+      border: 1px solid #333;
+      font-size: 20px;
+      cursor: pointer;
+    }
+    .tool-item-active {
+      background-color: #607d8b;
+    }
+    .tool-disabled {
+      cursor: not-allowed;
+    }
   }
   .viewports-wrapper {
     flex: 1;
@@ -441,17 +773,9 @@ export default {
     .cell_active {
       border-color: #fafa00!important;
     }
-    .full-screen {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: white;
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .cell-full-screen {
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
     }
 
     .content {
@@ -502,6 +826,35 @@ export default {
           font-size: 14px;
         }
       }
+      .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
+      }
     }
   }
 }
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 4062391d..f22011d0 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
@@ -39,6 +39,7 @@
         :related-study-info="relatedStudyInfo"
         @toggleTaskByViewer="toggleTaskByViewer"
         @toggleTask="toggleTask"
+        @toggleImage="toggleImage"
       />
     </div>
     <!-- 表单 -->
@@ -70,7 +71,7 @@
 </template>
 
 <script>
-import { getRelatedVisitTask, getReadingImageFile } from '@/api/trials'
+import { getRelatedVisitTask, getReadingImageFile, getNoneDicomMarkListOutDto } from '@/api/trials'
 import StudyList from './StudyList'
 import ImageViewer from './ImageViewer'
 import EcrfList from './EcrfList'
@@ -114,7 +115,7 @@ export default {
         const idx = this.visitTaskList.findIndex(i => i.VisitTaskId === id)
         if (idx === -1) return
         this.currentVisitInfo = this.visitTaskList[idx]
-        this.activeTaskVisitId = id
+        // this.activeTaskVisitId = id
       }
     }
   },
@@ -134,7 +135,8 @@ export default {
         const res = await getRelatedVisitTask(params)
         this.visitTaskList = res.Result.map((item) => ({
           ...item,
-          StudyList: []
+          StudyList: [],
+          Annotations: []
         }))
         const idx = res.Result.findIndex(i => i.IsCurrentTask)
         if (idx > -1) {
@@ -147,10 +149,14 @@ export default {
           const i = this.visitTaskList.findIndex(i => i.IsBaseLineTask)
           if (i > -1) {
             await this.getReadingImageFile(res.Result[i].VisitTaskId, i)
+            await this.getAnnotations(res.Result[i].VisitTaskId, i)
             const studyList = this.visitTaskList[i].StudyList
             if (studyList.length > 0) {
               const fileInfo = studyList[0].NoneDicomStudyFileList[0]
               this.relatedStudyInfo = { fileInfo, visitTaskInfo: this.visitTaskList[i], fileList: studyList[0].NoneDicomStudyFileList, fileIndex: 0, studyId: studyList[0].Id }
+              if (!this.selectArr.includes(res.Result[i].VisitTaskId)) {
+                this.selectArr.push(res.Result[i].VisitTaskId)
+              }
             }
           }
         }
@@ -160,10 +166,6 @@ export default {
         this.loading = false
       }
     },
-    // 获取初始化渲染检查信息
-    getInitStudyList() {
-      // 有序阅片且非基线
-    },
     // 获取任务关联的文件信息
     getReadingImageFile(visitTaskId, visitTaskIdx) {
       return new Promise(async(resolve, reject) => {
@@ -185,10 +187,36 @@ export default {
         }
       })
     },
+    // 获取任务关联的标注信息
+    getAnnotations(visitTaskId, visitTaskIdx) {
+      return new Promise(async(resolve, reject) => {
+        this.loading = true
+        try {
+          const params = {
+            visitTaskId: visitTaskId
+          }
+          const res = await getNoneDicomMarkListOutDto(params)
+          this.$set(this.visitTaskList[visitTaskIdx], 'Annotations', res.Result.NoneDicomMarkList)
+          this.loading = false
+          resolve()
+        } catch (e) {
+          console.log(e)
+          this.loading = false
+          reject(e)
+        }
+      })
+    },
     // 切换任务
     toggleTask(taskInfo) {
       this.setActiveTaskVisitId(taskInfo.VisitTaskId)
     },
+    // 视图触发任务切换
+    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)
+    },
     // 设置激活的访视
     async setActiveTaskVisitId(id, isInitActiveFile = false) {
       if (!id) return
@@ -199,6 +227,7 @@ export default {
       if (idx === -1) return
       if (this.visitTaskList[idx].StudyList.length === 0) {
         await this.getReadingImageFile(id, idx)
+        await this.getAnnotations(id, idx)
       }
       this.activeTaskVisitId = id
       this.$nextTick(() => {
@@ -207,12 +236,9 @@ 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)
+    // 切换图片
+    toggleImage(obj) {
+      this.$refs[obj.taskId][0].activeImage(obj)
     },
     selectFile(obj) {
       this.$refs['imageViewer'].setActiveCanvasImages(obj)
diff --git a/src/views/trials/trials-panel/reading/visit-review/components/ReportPage.vue b/src/views/trials/trials-panel/reading/visit-review/components/ReportPage.vue
index e3e2fb95..d0c0478c 100644
--- a/src/views/trials/trials-panel/reading/visit-review/components/ReportPage.vue
+++ b/src/views/trials/trials-panel/reading/visit-review/components/ReportPage.vue
@@ -1,3 +1,797 @@
 <template>
-  <div>报告页</div>
+  <div class="report-wrapper">
+    <el-card v-loading="loading" shadow="never" style="display:flex;flex-direction: column;">
+      <div slot="header" class="clearfix report-header">
+        <h3 style="margin:0;padding:0;">{{ $t('trials:readingReport:title:eicrf') }}</h3>
+        <div style="margin-left:auto">
+          <el-button
+            v-if="readingTaskState<2"
+            type="primary"
+            size="small"
+            @click="skipTask"
+          >
+            <!-- 跳过 -->
+            {{ $t('trials:readingReport:button:skip') }}
+          </el-button>
+          <el-button v-if="readingTaskState<2" type="primary" size="small" @click="getReportInfo">{{ $t('trials:readingReport:button:refresh') }}</el-button>
+          <el-button v-if="readingTaskState<2" type="primary" size="small" @click="handleSave(true)">{{ $t('common:button:save') }}</el-button>
+          <el-button v-if="readingTaskState<2" type="primary" size="small" @click="handleConfirm">{{ $t('common:button:submit') }}</el-button>
+        </div>
+      </div>
+      <div style="flex: 1">
+        <el-table
+          v-if="taskQuestions.length > 0"
+          ref="reportList"
+          v-adaptive="{bottomOffset:0}"
+          :data="taskQuestions"
+          row-key="Id"
+          border
+          default-expand-all
+          height="100"
+          :tree-props="{children: 'Childrens', hasChildren: 'hasChildren'}"
+          size="mini"
+        >
+          <el-table-column
+            prop=""
+            label=""
+            show-overflow-tooltip
+            width="350px"
+          >
+            <template slot-scope="scope">
+              <span v-if="scope.row.QuestionName">{{ scope.row.BlindName ? scope.row.QuestionName : scope.row.QuestionName }}</span>
+              <span
+                v-else
+                style="font-weight: bold;font-size: 16px;color: #f44336;"
+              >
+                {{ scope.row.GroupName }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-for="task in visitTaskList"
+            :key="task.VisitTaskId"
+            prop="date"
+            show-overflow-tooltip
+            width="200px"
+          >
+            <template slot="header">
+              <div v-if="task.IsCurrentTask">
+                {{ task.BlindName }}
+              </div>
+              <div v-else>
+                <div>
+                  {{ task.BlindName }}
+                  <el-button type="text" size="small" @click="previewDicoms(task)">
+                    <span class="el-icon-view" />
+                  </el-button>
+                </div>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <template v-if="readingTaskState<2 && task.VisitTaskId === visitTaskId && (scope.row.Type==='input' || scope.row.Type==='number' || scope.row.Type==='select' || scope.row.Type==='textarea' || scope.row.Type==='radio')">
+                <!-- 输入框 -->
+                <div>
+                  <template v-if="!((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)" />
+                  <el-input
+                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type==='input' || scope.row.Type==='textarea') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]"
+                    size="mini"
+                  />
+                  <span v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type==='input' || scope.row.Type==='textarea')">
+                    {{ questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId] }}
+                  </span>
+                  <el-input
+                    v-else-if="(scope.row.Type==='input' || scope.row.Type==='textarea') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId]"
+                    size="mini"
+                  />
+                  <span v-else-if="scope.row.Type==='input' || scope.row.Type==='textarea'">
+                    {{ questionForm[scope.row.QuestionId] }}
+                  </span>
+                  <el-select
+                    v-else-if="questionForm[scope.row.QuestionId] instanceof Array && (scope.row.Type==='select' || scope.row.Type==='radio') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]"
+                    size="mini"
+                    clearable
+                  >
+                    <template>
+                      <el-option
+                        v-for="val in scope.row.TypeValue.split('|')"
+                        :key="val"
+                        :label="val"
+                        :value="val"
+                      />
+                    </template>
+                  </el-select>
+                  <span v-else-if="questionForm[scope.row.QuestionId] instanceof Array && scope.row.Type==='select'">
+                    {{ questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId] }}
+                  </span>
+                  <el-select
+                    v-else-if="(scope.row.Type==='select' || scope.row.Type==='radio') && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId]"
+                    size="mini"
+                    clearable
+                  >
+                    <template>
+                      <el-option
+                        v-for="val in scope.row.TypeValue.split('|')"
+                        :key="val"
+                        :label="val"
+                        :value="val"
+                      />
+                    </template>
+                  </el-select>
+                  <span v-else-if="scope.row.Type==='select' || scope.row.Type==='radio'">
+                    {{ questionForm[scope.row.QuestionId] }}
+                  </span>
+                  <el-input
+                    v-else-if="scope.row.DataSource !== 1 && questionForm[scope.row.QuestionId] instanceof Array && scope.row.Type==='number' && (scope.row.xfIndex || scope.row.xfIndex === 0) && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]"
+                    :disabled="scope.row.DataSource === 1"
+                    size="mini"
+                    @blur="limitBlur(questionForm[scope.row.QuestionId][scope.row.xfIndex], scope.row.TableQuestionId, scope.row.ValueType)"
+                    @focus="() => {questionId = scope.row.QuestionId}"
+                  >
+                    <template v-if="scope.row.Unit !== 0" slot="append">{{ scope.row.Unit !== 4 ? $fd('ValueUnit', scope.row.Unit) : scope.row.CustomUnit }}</template>
+                    <template v-else-if="scope.row.ValueType === 2" slot="append">%</template>
+                  </el-input>
+                  <span v-else-if="questionForm[scope.row.QuestionId] instanceof Array && scope.row.Type==='number' && (scope.row.xfIndex || scope.row.xfIndex === 0)">
+                    <template v-if="(scope.row.ValueType === 0 || scope.row.ValueType === 1) && scope.row.Unit">
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]))? questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]:`${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]} ${scope.row.Unit !== 4 ? $fd('ValueUnit',scope.row.Unit) : scope.row.CustomUnit}` }}
+                    </template>
+                    <template v-else-if="scope.row.ValueType === 2">
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId])) ? questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]:`${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]} %` }}
+                    </template>
+                    <template v-else>
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId])) ? questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]:`${questionForm[scope.row.QuestionId][scope.row.xfIndex][scope.row.TableQuestionId]}` }}
+                    </template>
+                  </span>
+                  <el-input
+                    v-else-if="scope.row.DataSource !== 1 && scope.row.Type==='number' && !scope.row.IsShowInDicom && ((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)"
+                    v-model="questionForm[scope.row.QuestionId]"
+                    :disabled="scope.row.DataSource === 1"
+                    size="mini"
+                    @blur="limitBlur(questionForm, scope.row.QuestionId, scope.row.ValueType)"
+                    @focus="() => {questionId = scope.row.QuestionId}"
+                  >
+                    <template v-if="scope.row.Unit !== 0" slot="append">{{ scope.row.Unit !== 4 ? $fd('ValueUnit', scope.row.Unit) : scope.row.CustomUnit }}</template>
+                    <template v-else-if="scope.row.ValueType === 2" slot="append">%</template>
+                  </el-input>
+                  <span v-else-if="scope.row.Type==='number'">
+                    <template v-if="(scope.row.ValueType === 0 || scope.row.ValueType === 1) && scope.row.Unit">
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId]))? questionForm[scope.row.QuestionId]:`${questionForm[scope.row.QuestionId]} ${scope.row.Unit !== 4 ? $fd('ValueUnit',scope.row.Unit) : scope.row.CustomUnit}` }}
+                    </template>
+                    <template v-else-if="scope.row.ValueType === 2">
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId])) ? questionForm[scope.row.QuestionId]:`${questionForm[scope.row.QuestionId]} %` }}
+                    </template>
+                    <template v-else>
+                      {{ isNaN(parseInt(questionForm[scope.row.QuestionId])) ? questionForm[scope.row.QuestionId] : questionForm[scope.row.QuestionId] }}
+                    </template>
+                  </span>
+                </div>
+              </template>
+              <template v-else-if="scope.row.DictionaryCode">
+                {{ $fd(scope.row.DictionaryCode, scope.row.Answers[task.VisitTaskId]) }}
+              </template>
+              <template v-else-if="criterionType === 10">
+                {{ isNaN(parseInt(scope.row.Answers[task.VisitTaskId]))?scope.row.Answers[task.VisitTaskId]:`${scope.row.Answers[task.VisitTaskId]}` }}
+              </template>
+              <template v-else-if="!((task.IsBaseLine && scope.row.LimitEdit === 1) || (!task.IsBaseLine && scope.row.LimitEdit === 2) || scope.row.LimitEdit === 0)" />
+              <template v-else-if="(scope.row.ValueType === 0 || scope.row.ValueType === 1) && scope.row.Unit">
+                {{ isNaN(parseInt(scope.row.Answers[task.VisitTaskId]))?scope.row.Answers[task.VisitTaskId]:`${scope.row.Answers[task.VisitTaskId]} ${scope.row.Unit !== 4 ? $fd('ValueUnit',scope.row.Unit) : scope.row.CustomUnit}` }}
+              </template>
+              <template v-else-if="scope.row.ValueType === 2">
+                {{ isNaN(parseInt(scope.row.Answers[task.VisitTaskId])) ? scope.row.Answers[task.VisitTaskId]:`${scope.row.Answers[task.VisitTaskId]} %` }}
+              </template>
+              <template v-else-if="scope.row.Answers && scope.row.Answers.hasOwnProperty(task.VisitTaskId)">
+                {{ scope.row.Answers[task.VisitTaskId] }}
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+
+    <!-- 签名框 -->
+    <el-dialog
+      v-if="signVisible"
+      :visible.sync="signVisible"
+      :close-on-click-modal="false"
+      width="600px"
+      custom-class="base-dialog-wrapper"
+    >
+      <div slot="title">
+        <span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
+        <span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${ currentUser })` }}</span>
+      </div>
+      <SignForm ref="signForm" :sign-code-enum="signCode" @closeDialog="closeSignDialog" />
+    </el-dialog>
+  </div>
 </template>
+<script>
+import { changeCalculationAnswer, getReadingReportEvaluation, submitDicomVisitTask, verifyVisitTaskQuestions, getQuestionCalculateRelation } from '@/api/trials'
+import { setSkipReadingCache } from '@/api/reading'
+// import UploadFile from './UploadFile'
+import const_ from '@/const/sign-code'
+import SignForm from '@/views/trials/components/newSignForm'
+import { getToken } from '@/utils/auth'
+import store from '@/store'
+export default {
+  name: 'ReportPage',
+  components: { SignForm },
+  data() {
+    return {
+      trialId: '',
+      visitTaskId: '',
+      subjectId: '',
+      readingTool: 1,
+      criterionType: null,
+      isReadingTaskViewInOrder: false,
+      currentUser: zzSessionStorage.getItem('userName'),
+      signVisible: false,
+      signCode: null,
+      visitTaskList: [],
+      taskQuestions: [],
+      loading: false,
+      answers: [],
+      readingTaskState: 2,
+      answerArr: [],
+      questions: [],
+      CalculationList: [],
+      TrialReadingCriterionId: null,
+      tableAnswers: {},
+      questionForm: {},
+      questionId: null,
+      taskInfo: null
+    }
+  },
+  watch: {
+    questionForm: {
+      deep: true,
+      immediate: true,
+      handler(v, oldv) {
+        try {
+          if (!v[this.questionId] || !oldv[this.questionId]) return
+        } catch (e) {
+        }
+        this.formItemNumberChange(this.questionId, false)
+      }
+    }
+  },
+  async mounted() {
+    this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
+    this.trialId = this.$route.query.trialId
+    this.visitTaskId = this.taskInfo.VisitTaskId
+    this.subjectId = this.taskInfo.SubjectId
+    this.criterionType = this.taskInfo.CriterionType
+    this.digitPlaces = this.taskInfo.DigitPlaces
+    this.TrialReadingCriterionId = this.taskInfo.TrialReadingCriterionId
+    window.addEventListener('resize', () => {
+      this.handleResize()
+    })
+    await this.getQuestionCalculateRelation()
+    this.getReportInfo()
+  },
+  methods: {
+    limitBlur(questionForm, id, valueType) {
+      const value = questionForm[id]
+      if (valueType === 0) {
+        this.$set(questionForm, id, parseInt(value))
+      } else if (valueType === 3) {
+        this.$set(questionForm, id, parseFloat(value))
+      } else {
+        this.$set(questionForm, id, parseFloat(value).toFixed(this.digitPlaces))
+      }
+    },
+    setImageUrl(qid, index, tqid, url, RowId) {
+      if (index || index === 0) {
+        // 表格问题
+        this.$set(this.questionForm[qid][index], tqid, url)
+        this.$set(this.questionForm[qid][index], tqid + '_RowId', RowId)
+        // this.questionForm[qid][index][tqid] = url
+      } else {
+        // 非表格问题
+        this.questionForm[qid] = url
+      }
+    },
+    getTagterAnswers(list, questionId) {
+      list.forEach(v => {
+        if (v.QuestionId === questionId) {
+          return Object.assign({}, v.Answers)
+        } else if (v.Childrens.length > 0) {
+          return this.getTagterAnswers(v.Childrens, questionId)
+        }
+      })
+    },
+    formItemNumberChange(questionId, isTable) {
+      if (isTable) {
+        this.CalculationList.forEach((v, i) => {
+          var find = v.CalculateQuestionList.filter(o => {
+            return o.QuestionId === questionId
+          })
+          // find的自动计算值number
+          if (find) {
+            var num = this.logic(v)
+            if (num !== false) {
+              this.$set(this.questionForm, v.QuestionId, num)
+              // this.$emit('setFormItemData', { key: v.QuestionId, val: num })
+            }
+          }
+        })
+      } else {
+        this.CalculationList.forEach(v => {
+          var find = v.CalculateQuestionList.filter(o => {
+            return o.TableQuestionId === questionId
+          })
+          // find的自动计算值number
+          if (find) {
+            var num = this.logic(v)
+            if (num !== false) {
+              this.$set(this.questionForm, v.QuestionId, num)
+              // this.$emit('setFormItemData', { key: v.QuestionId, val: num })
+            }
+          }
+        })
+      }
+      // this.$emit('formItemNumberChange')
+    },
+    getTableAnswers(QuestionId, list) {
+      var arr = []
+      window.xfList = list
+      list.forEach((v, i) => {
+        var obj = {}
+        v.Childrens.forEach((o) => {
+          this.$set(o, 'xfIndex', i)
+          obj[o.TableQuestionId + '_RowId'] = o.RowId
+          obj[o.TableQuestionId] = o.Answers[this.visitTaskId]
+        })
+        arr.push(obj)
+      })
+      return arr
+    },
+    InitVisitTaskQuestionForm() {
+      this.taskQuestions.map((v, i) => {
+        if (v.Type === 'group' && v.Childrens.length === 0 && v.Type !== 'table') return
+        if (!v.IsPage && v.Type !== 'group' && v.Type !== 'summary' && v.Type !== 'table' && v.Type !== 'number') {
+          this.$set(this.questionForm, v.QuestionId, v.Answers[this.visitTaskId])
+        }
+        if (v.Type === 'table') {
+          var tableAnswers = this.getTableAnswers(v.QuestionId, v.Childrens, i)
+          this.$set(this.questionForm, v.QuestionId, tableAnswers)
+          // this.$set(v, 'xfIndex', i)
+        }
+        if (v.Type === 'number') {
+          let val = null
+          if (v.ValueType === 0) {
+            val = parseInt(v.Answers[this.visitTaskId])
+          } else if (v.ValueType === 3) {
+            val = v.Answers[this.visitTaskId]
+          } else {
+            val = v.Answers[this.visitTaskId] === '' ? parseFloat(0).toFixed(this.digitPlaces) : v.Answers[this.visitTaskId]
+          }
+          this.$set(this.questionForm, v.QuestionId, val)
+        }
+        if (v.Childrens.length > 0) {
+          this.setChild(v.Childrens)
+        }
+      })
+      this.formItemNumberChange(this.questionId, false)
+    },
+    setChild(obj) {
+      obj.forEach((i, index) => {
+        if (i.Type !== 'group' && i.Type !== 'summary' && i.Id && i.Type !== 'table') {
+          this.$set(this.questionForm, i.QuestionId, i.Answers[this.visitTaskId])
+        }
+        if (i.Type === 'table') {
+          var tableAnswers = this.getTableAnswers(i.QuestionId, i.Childrens, index)
+          this.$set(this.questionForm, i.QuestionId, tableAnswers)
+        }
+        if (i.Type === 'number') {
+          let val = null
+          if (i.ValueType === 0) {
+            val = parseInt(i.Answers[this.visitTaskId])
+          } else if (i.ValueType === 3) {
+            val = i.Answers[this.visitTaskId]
+          } else {
+            val = i.Answers[this.visitTaskId] === '' ? parseFloat(0).toFixed(this.digitPlaces) : i.Answers[this.visitTaskId]
+          }
+          this.$set(this.questionForm, i.QuestionId, val)
+        }
+        if (i.Childrens && i.Childrens.length > 0 && i.Type !== 'table') {
+          this.setChild(i.Childrens)
+        }
+      })
+    },
+    getQuestionCalculateRelation() {
+      return new Promise(resolve => {
+        getQuestionCalculateRelation({
+          TrialReadingCriterionId: this.TrialReadingCriterionId
+        }).then(res => {
+          this.CalculationList = res.Result
+          resolve()
+        })
+      })
+    },
+    logic(rules, num = 0) {
+      try {
+        if (rules.CalculateQuestionList.length === 0) {
+          return false
+        }
+        rules.CalculateQuestionList.forEach((o, i) => {
+          if (i === 0) {
+            if (rules.CustomCalculateMark > 4) {
+              switch (rules.CustomCalculateMark) {
+                case 5:
+                  this.questionForm[o.QuestionId].forEach((q, qi) => {
+                    if (qi === 0) {
+                      num = parseFloat(q[o.TableQuestionId])
+                    } else {
+                      num *= parseFloat(q[o.TableQuestionId])
+                    }
+                  })
+                  break
+                case 6:
+                  this.questionForm[o.QuestionId].forEach((q, qi) => {
+                    if (qi === 0) {
+                      num = isNaN(parseFloat(q[o.TableQuestionId])) ? null : parseFloat(q[o.TableQuestionId])
+                    } else {
+                      num += isNaN(parseFloat(q[o.TableQuestionId])) ? null : parseFloat(q[o.TableQuestionId])
+                    }
+                  })
+                  break
+                case 7:
+                  this.questionForm[o.QuestionId].forEach((q, qi) => {
+                    if (qi === 0) {
+                      num = parseFloat(q[o.TableQuestionId])
+                    } else {
+                      num += parseFloat(q[o.TableQuestionId])
+                    }
+                  })
+                  num = this.questionForm[o.QuestionId].length === 0 ? 0 : num / this.questionForm[o.QuestionId].length
+                  break
+                case 8:
+                  var arr = []
+                  this.questionForm[o.QuestionId].forEach(q => {
+                    arr.push(q[o.TableQuestionId])
+                  })
+                  num = arr.length === 0 ? 0 : Math.max(...arr)
+                  break
+                case 9:
+                  // eslint-disable-next-line no-redeclare
+                  var arr = []
+                  this.questionForm[o.QuestionId].forEach(q => {
+                    arr.push(q[o.TableQuestionId])
+                  })
+                  num = arr.length === 0 ? 0 : Math.min(...arr)
+                  break
+              }
+            } else {
+              num = parseFloat(this.questionForm[o.TableQuestionId])
+            }
+          } else {
+            switch (rules.CustomCalculateMark) {
+              case 1:
+                num += parseFloat(this.questionForm[o.TableQuestionId])
+                break
+              case 2:
+                num -= parseFloat(this.questionForm[o.TableQuestionId])
+                break
+              case 3:
+                num *= parseFloat(this.questionForm[o.TableQuestionId])
+                break
+              case 4:
+                num /= parseFloat(this.questionForm[o.TableQuestionId])
+                // num /= parseFloat(this.questionForm[o.TableQuestionId])
+                break
+            }
+          }
+        })
+      } catch (e) {
+        console.log(e)
+      }
+      var digitPlaces = parseInt(localStorage.getItem('digitPlaces'))
+      if (rules.ValueType === 2) {
+        num = num * 100
+      }
+      return isNaN(num) ? '' : isFinite(num) ? num.toFixed(digitPlaces) : '∞'
+    },
+    getReportInfo() {
+      this.loading = true
+      var params = {
+        visitTaskId: this.visitTaskId,
+        trialId: this.trialId
+      }
+      this.taskQuestions = []
+      getReadingReportEvaluation(params).then(res => {
+        this.readingTaskState = res.Result.ReadingTaskState
+        this.answerArr = []
+        this.questions = res.Result.TaskQuestions.concat()
+        var taskQuestions = this.getQuestions(res.Result.TaskQuestions)
+        taskQuestions.forEach(item => {
+          this.$set(this.taskQuestions, this.taskQuestions.length, item)
+        })
+        this.visitTaskList = res.Result.VisitTaskList
+        this.InitVisitTaskQuestionForm()
+        this.handleResize()
+        this.loading = false
+      }).catch(() => { this.loading = false })
+    },
+    getQuestions(questions) {
+      const arr = []
+      if (questions.length !== 0) {
+        questions.forEach((item) => {
+          const obj = item
+          this.$set(obj, 'Answers', {})
+
+          var digitPlaces = parseInt(localStorage.getItem('digitPlaces')) || 0
+          item.Answer.forEach(i => {
+            if (item.DictionaryCode) {
+              this.$set(obj.Answers, i.VisitTaskId, i.Answer ? parseInt(i.Answer) : null)
+              // obj.Answers[i.VisitTaskId] = i.Answer ? parseInt(i.Answer) : null
+            } else {
+              if (item.Type === 'number') {
+                let val = null
+                if (item.ValueType === 0) {
+                  val = parseInt(i.Answer)
+                } else if (item.ValueType === 3) {
+                  val = i.Answer
+                } else {
+                  val = isNaN(parseFloat(i.Answer)) ? i.Answer : parseFloat(i.Answer).toFixed(digitPlaces)
+                }
+                this.$set(obj.Answers, i.VisitTaskId, val)
+              } else {
+                this.$set(obj.Answers, i.VisitTaskId, i.Answer)
+              }
+              // obj.Answers[i.VisitTaskId] = i.Answer
+            }
+          })
+          if (item.Childrens.length >= 1) {
+            obj.Childrens = this.getQuestions(item.Childrens)
+          }
+          arr.push(obj)
+        })
+      }
+      return arr
+    },
+    handleShowDetail(val) {
+      this.getReportInfo()
+      // this.taskQuestions = this.getQuestions(res.Result.TaskQuestions, !this.isShowDetail, null)
+    },
+    async handleConfirm() {
+      await this.handleSave(false)
+      await this.verifyVisitTaskQuestions()
+      const { ImageAssessmentReportConfirmation } = const_.processSignature
+      this.signCode = ImageAssessmentReportConfirmation
+      this.signVisible = true
+    },
+    verifyVisitTaskQuestions() {
+      return new Promise((resolve, reject) => {
+        this.loading = true
+        verifyVisitTaskQuestions({ visitTaskId: this.visitTaskId }).then(res => {
+          this.loading = false
+          resolve()
+        }).catch(() => {
+          this.loading = false
+          reject()
+        })
+      })
+    },
+    handleResize() {
+      this.$nextTick(() => {
+        this.$refs.reportList ? this.$refs.reportList.doLayout() : ''
+      })
+    },
+    // 关闭签名框
+    closeSignDialog(isSign, signInfo) {
+      if (isSign) {
+        this.signConfirm(signInfo)
+      } else {
+        this.signVisible = false
+      }
+    },
+    // 签名并确认
+    signConfirm(signInfo) {
+      this.loading = true
+      var params = {
+        data: {
+          visitTaskId: this.visitTaskId
+        },
+        signInfo: signInfo
+      }
+      submitDicomVisitTask(params).then(res => {
+        if (res.IsSuccess) {
+          this.$message.success(this.$t('common:message:savedSuccessfully'))
+          if (this.$refs['signForm']) {
+            this.$refs['signForm'].btnLoading = false
+          }
+
+          this.signVisible = false
+          // window.location.reload()
+          // window.opener.postMessage('refreshTaskList', window.location)
+
+          // 设置当前任务阅片状态为已读
+          this.readingTaskState = 2
+          store.dispatch('reading/setVisitTaskReadingTaskState', { visitTaskId: this.visitTaskId, readingTaskState: 2 })
+          // DicomEvent.$emit('setReadingState', 2)
+          window.opener.postMessage('refreshTaskList', window.location)
+          this.$confirm(this.$t('trials:oncologyReview:title:msg2'), {
+            type: 'warning',
+            distinguishCancelAndClose: true
+          })
+            .then(() => {
+              // var token = getToken()
+              // var subjectCode = this.$router.currentRoute.query.subjectCode
+              // var subjectId = this.$router.currentRoute.query.subjectId
+              // var trialId = this.$router.currentRoute.query.trialId
+
+              // this.$router.push({
+              //   path: `/readingPage?subjectCode=${subjectCode}&subjectId=${subjectId}&trialId=${trialId}&TokenKey=${token}`
+              // })
+              // DicomEvent.$emit('getNextTask')
+              window.location.reload()
+            })
+            .catch(action => {
+
+            })
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+        if (this.$refs['signForm'] && this.$refs['signForm'].btnLoading) {
+          this.$refs['signForm'].btnLoading = false
+        }
+      })
+    },
+    previewDicoms(task) {
+      var token = getToken()
+      // var subjectCode = this.$router.currentRoute.query.subjectCode
+      var subjectCode = localStorage.getItem('subjectCode')
+      var subjectId = this.subjectId
+      var trialId = this.trialId
+      var isReadingTaskViewInOrder = this.isReadingTaskViewInOrder
+      var criterionType = this.criterionType
+      var readingTool = this.readingTool
+      var trialReadingCriterionId = this.$router.currentRoute.query.TrialReadingCriterionId
+      var path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${subjectCode}&subjectId=${subjectId}&visitTaskId=${task.VisitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}`
+      const routeData = this.$router.resolve({ path })
+      window.open(routeData.href, '_blank')
+    },
+    handleSave(isPrompt) {
+      return new Promise((resolve, reject) => {
+        this.loading = true
+        var answers = []
+        var tableQuestionAnswer = []
+        for (const k in this.questionForm) {
+          if (this.questionForm[k] instanceof Array) {
+            this.questionForm[k].forEach((v, i) => {
+              Object.keys(v).forEach(o => {
+                if (o.indexOf('_RowId') === -1) {
+                  tableQuestionAnswer.push({
+                    questionId: k,
+                    answer: v[o],
+                    tableQuestionId: o,
+                    rowId: v[o + '_RowId']
+                  })
+                }
+              })
+            })
+            // tableQuestionAnswer.push({})
+          } else {
+            answers.push({ questionId: k, answer: this.questionForm[k].toString() })
+          }
+        }
+        var params = {
+          visitTaskId: this.visitTaskId,
+          questionAnswer: answers,
+          tableQuestionAnswer: tableQuestionAnswer
+        }
+        changeCalculationAnswer(params).then(res => {
+          if (isPrompt) {
+            this.$message.success(this.$t('common:message:savedSuccessfully'))
+          }
+          // DicomEvent.$emit('refreshQuestionAnswer')
+          this.loading = false
+          resolve()
+        }).catch(() => {
+          this.loading = false
+          reject()
+        })
+      })
+    },
+    async skipTask() {
+      try {
+        // 是否确认跳过？
+        const confirm = await this.$confirm(
+          this.$t('trials:readingReport:message:skipConfirm'),
+          {
+            type: 'warning',
+            distinguishCancelAndClose: true
+          }
+        )
+        if (confirm !== 'confirm') return
+        this.loading = true
+        const res = await setSkipReadingCache({ visitTaskId: this.visitTaskId })
+        this.loading = false
+        if (res.IsSuccess) {
+          window.location.reload()
+        }
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.report-wrapper{
+
+  height: 100%;
+  // background-color: #fff;
+  background-color: #000;
+  ::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    // background: #d0d0d0;
+  }
+  .report-header{
+    display: flex;
+  }
+  .el-card{
+    background-color: #000;
+    color: #ffffff;
+    border:none;
+  }
+  ::v-deep .el-table--border th.gutter:last-of-type{
+    border: none;
+  }
+  ::v-deep .el-table, .el-table__expanded-cell {
+    background-color: #000;
+    color: #fff;
+    border-color:#444444;
+  }
+
+  ::v-deep .el-table th, .el-table tr {
+    background-color: #000;
+    color: #fff;
+    border-color:#444444;
+  }
+  ::v-deep .el-table__body tr > td{
+    background-color:#000 !important;
+    color: #fff;
+    border-color:#444444;
+  }
+  ::v-deep .el-table__body tr:hover > td{
+    background-color:#858282 !important;
+    color: #fff;
+    border-color:#444444;
+  }
+  ::v-deep .el-table--border th.gutter:last-of-type{
+    border: none;
+  }
+  ::v-deep .el-card__header{
+    border: none;
+    padding: 10px;
+  }
+  ::v-deep .el-upload-list--picture-card .el-upload-list__item{
+    width: 30px;
+    height: 30px;
+  }
+  ::v-deep .el-upload--picture-card{
+    width: 30px;
+    height: 30px;
+    line-height: 40px;
+  }
+}
+::v-deep .el-switch__label.is-active{
+  color: #428bca;
+}
+.uploadWrapper{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>
diff --git a/src/views/trials/trials-panel/reading/visit-review/components/StudyList.vue b/src/views/trials/trials-panel/reading/visit-review/components/StudyList.vue
index 10910e47..6fb687e2 100644
--- a/src/views/trials/trials-panel/reading/visit-review/components/StudyList.vue
+++ b/src/views/trials/trials-panel/reading/visit-review/components/StudyList.vue
@@ -19,6 +19,7 @@
         <el-collapse-item v-for="(study, index) in studyList" :key="`${study.Id}`" :name="`${study.Id}`">
           <template slot="title">
             <div
+              v-if="!study.IsCriticalSequence"
               class="dicom-desc"
             >
               <div>{{ study.CodeView }}</div>
@@ -27,6 +28,10 @@
                 <span style="margin-left: 5px;" :title="study.Modality">{{ study.Modality }}</span>
               </div>
             </div>
+            <div v-else>
+              <!-- 关键序列 -->
+              关键文件
+            </div>
           </template>
           <div class="series">
             <div
@@ -90,6 +95,14 @@ export default {
       this.activeFileIndex = fileIndex
       const fileList = study.NoneDicomStudyFileList
       this.$emit('selectFile', { fileInfo: fileList[fileIndex], fileList, visitTaskInfo: this.visitTaskInfo, fileIndex: fileIndex, studyId: study.Id })
+    },
+    activeImage(obj) {
+      if (this.studyList.length === 0) return
+      const i = this.studyList.findIndex(i => i.Id === obj.studyId)
+      if (i === -1) return
+      this.activeNames.push(obj.studyId)
+      this.activeStudyIndex = i
+      this.activeFileIndex = obj.imageIndex
     }
   }
 }
diff --git a/src/views/trials/trials-panel/reading/visit-review/index.vue b/src/views/trials/trials-panel/reading/visit-review/index.vue
index ef0d6b4a..aec04def 100644
--- a/src/views/trials/trials-panel/reading/visit-review/index.vue
+++ b/src/views/trials/trials-panel/reading/visit-review/index.vue
@@ -17,7 +17,7 @@
         :label="$t('trials:reading:tabTitle:report')"
         name="report"
       >
-        <report-page />
+        <report-page v-if="activeName === 'report'" />
       </el-tab-pane>
     </el-tabs>
   </div>