From 92da42f01064a1a78a6be2edfbb1eacb6609b575 Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Mon, 29 Jun 2026 16:28:33 +0800
Subject: [PATCH] =?UTF-8?q?QC=E8=B4=A8=E6=8E=A7=E6=9F=A5=E7=9C=8B=E9=9D=9E?=
 =?UTF-8?q?dicom=E6=96=87=E4=BB=B6=E9=A1=B5=E9=9D=A2=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   5 +
 .../none-dicoms/components/file-viewer.vue    | 868 ++++++++++++++++++
 .../none-dicoms/components/study-list.vue     | 456 +++++++++
 src/views/none-dicoms/index.vue               | 136 +++
 .../visit-review/components/StudyList.vue     |  14 +-
 .../qc-check/components/qualityAssurance.vue  |   6 +-
 6 files changed, 1478 insertions(+), 7 deletions(-)
 create mode 100644 src/views/none-dicoms/components/file-viewer.vue
 create mode 100644 src/views/none-dicoms/components/study-list.vue
 create mode 100644 src/views/none-dicoms/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 7a043ddb..38ccb36e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -128,6 +128,11 @@ export const constantRoutes = [
     hidden: true,
     component: () => import('@/views/none-dicom-show/index')
   },
+  {
+    path: '/noneDicoms',
+    hidden: true,
+    component: () => import('@/views/none-dicoms/index')
+  },
   {
     path: '/noneDicomReading',
     name: 'noneDicomReading',
diff --git a/src/views/none-dicoms/components/file-viewer.vue b/src/views/none-dicoms/components/file-viewer.vue
new file mode 100644
index 00000000..a87fa37f
--- /dev/null
+++ b/src/views/none-dicoms/components/file-viewer.vue
@@ -0,0 +1,868 @@
+<template>
+  <div class="none-dicom-viewer">
+    <!-- viewports -->
+    <div class="viewports-wrapper" v-loading="loading" ref="viewports-wrapper">
+      <div ref="container" class="grid-container" :style="gridStyle">
+        <div v-for="(v, index) in viewportInfos" :ref="`grid-cell-${index}`" :key="index" :style="getCellStyle(index)"
+          :class="['grid-cell', index === activeCanvasIndex ? 'cell_active' : '', index === fullScreenIndex ? 'cell-full-screen' : '']"
+          @dblclick="toggleFullScreen($event, index)" @click="activeCanvas(index)"
+          @mouseup="sliderMouseup($event, index)" @mousemove="sliderMousemove($event, index)"
+          @mouseleave="sliderMouseleave($event, index)">
+          <div v-show="imageType.includes(v.fileType)" :ref="`canvas-${index}`" class="content">
+            <div class="left-top-text">
+              <div v-if="v.currentFileName">{{ v.currentFileName }}</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 v-if="v.fileType === 'application/pdf' && fullScreenIndex === null" class="content flex_col">
+            <div class="content-top" style="height: 50px;">
+              <div class="left-top-text">
+                <div v-if="v.currentFileName">{{ v.currentFileName }}</div>
+              </div>
+            </div>
+            <div class="content-main" style="flex: 1;">
+              <iframe v-if="v.currentFilePath" :ref="`iframe-${index}`"
+                :src="`/static/pdfjs/web/viewer.html?file=${OSSclientConfig.basePath}${v.currentFilePath}?index=${index}`"
+                width="100%" height="100%" frameborder="0" crossorigin="anonymous" />
+            </div>
+
+          </div>
+
+          <div v-if="v.fileType.includes('mp4')" class="content flex_col">
+            <div class="content-top" style="height: 50px;">
+              <div class="left-top-text">
+                <div v-if="v.currentFileName">{{ v.currentFileName }}</div>
+              </div>
+            </div>
+            <div class="content-main" :ref="`video-content-main-${index}`" style="flex: 1;">
+              <video v-if="v.currentFilePath" :ref="`videovideo-${index}`"
+                :src="`${OSSclientConfig.basePath}${v.currentFilePath}`" crossorigin="anonymous"
+                width="100%" height="100%" autoplay controls controlsList="nodownload"></video>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <!-- tools -->
+    <div class="dicom-tools">
+      <div class="measureTool-wrapper">
+        <div class="sideTool-title">{{ $t('trials:reading:button:layout') }}</div>
+        <div class="sideTool-wrapper">
+          <label>{{ $t('trials:reading:button:layout') }}:</label>
+          <select class="sidetool-select" style="width:90px" :value="layout.replace('*', 'x')" @change="handleLayoutChange">
+            <option value="1x1">1x1</option>
+            <option value="1x2">1x2</option>
+            <option value="2x1">2x1</option>
+            <option value="2x2">2x2</option>
+          </select>
+        </div>
+      </div>
+      <!-- 图像变换 -->
+      <div class="measureTool-wrapper">
+        <div class="sideTool-title">{{ $t('trials:dicom-show:transform') }}</div>
+        <div class="sideTool-wrapper">
+          <button :title="$t('trials:reading:button:zoom')" :class="{ 'btn-link': true, activeTool: activeTool === 'Zoom' }"
+            data-tool="Zoom" @click="setToolActive('Zoom')">
+            <svg-icon icon-class="magnifier" style="font-size:20px;" />
+          </button>
+          <button :title="$t('trials:reading:button:move')" :class="{ 'btn-link': true, activeTool: activeTool === 'Pan' }"
+            data-tool="Pan" @click="setToolActive('Pan')">
+            <svg-icon icon-class="move" style="font-size:20px;" />
+          </button>
+          <button :title="$t('trials:reading:button:rotate')" :class="{ 'btn-link': true, activeTool: activeTool === 'PlanarRotate' }"
+            data-tool="PlanarRotate" @click="setToolActive('PlanarRotate')">
+            <svg-icon icon-class="rotate" style="font-size:20px;" />
+          </button>
+          <button :title="$t('trials:reading:button:reset')" class="btn-link" @click="resetViewport">
+            <svg-icon icon-class="refresh" style="font-size:20px;" />
+          </button>
+        </div>
+      </div>
+      <!-- 测量工具 -->
+      <!-- <div class="measureTool-wrapper">
+        <div class="sideTool-title">{{ $t('trials:dicom-show:measurementLabeling') }}</div>
+        <div class="sideTool-wrapper">
+          <button :title="$t('trials:reading:button:screenShot')" class="btn-link" @click="saveImage">
+            <svg-icon icon-class="image" style="font-size:20px;" />
+          </button>
+          <button :title="$t('trials:reading:button:reset')" class="btn-link" @click="resetViewport">
+            <svg-icon icon-class="refresh" style="font-size:20px;" />
+          </button>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+<script>
+
+import {
+  RenderingEngine,
+  Enums,
+  imageLoader,
+  metaData,
+  getRenderingEngine,
+  eventTarget,
+  utilities as csUtils
+  // getEnabledElementByIds
+} from '@cornerstonejs/core'
+
+import * as cornerstoneTools from '@cornerstonejs/tools'
+import LengthscaleTool from "@/views/trials/trials-panel/reading/visit-review/tools/LengthscaleTool"
+import initLibraries from '@/views/trials/trials-panel/reading/dicoms/components/Fusion/js/initLibraries'
+import hardcodedMetaDataProvider from '@/views/trials/trials-panel/reading/visit-review/js/hardcodedMetaDataProvider'
+import registerWebImageLoader from '@/views/trials/trials-panel/reading/visit-review/js/registerWebImageLoader'
+import store from '@/store'
+const { ViewportType } = Enums
+const renderingEngineId = 'myRenderingEngine'
+const {
+  ToolGroupManager,
+  Enums: csToolsEnums,
+  StackScrollTool,
+  PanTool,
+  ZoomTool,
+  PlanarRotateTool,
+  ArrowAnnotateTool,
+  RectangleROITool,
+  PlanarFreehandROITool,
+  SplineROITool,
+  EraserTool,
+  LengthTool,
+  EllipticalROITool,
+  CircleROITool,
+  AngleTool,
+  BidirectionalTool,
+  // cursors
+} = cornerstoneTools
+const newStyles = {
+  global: {
+    color: 'rgb(255, 0, 0)',
+    colorHighlighted: 'rgb(0, 255, 0)',
+    colorSelected: 'rgb(255, 0, 0)',
+    colorLocked: 'rgb(255, 0, 0)',
+    lineWidth: '1',
+    lineDash: '',
+    shadow: true,
+    textBoxVisibility: true,
+    textBoxFontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+    textBoxFontSize: '14px',
+    textBoxColor: 'rgb(255, 0, 0)',
+    textBoxColorHighlighted: 'rgb(0, 255, 0)',
+    textBoxColorSelected: 'rgb(255, 0, 0)',
+    textBoxColorLocked: 'rgb(255, 0, 0)',
+    textBoxBackground: '',
+    textBoxLinkLineWidth: '1',
+    textBoxLinkLineDash: '2,3',
+    textBoxShadow: true,
+    markerSize: '10'
+  }
+}
+cornerstoneTools.annotation.config.style.setDefaultToolStyles(newStyles)
+const { MouseBindings, Events: toolsEvents } = csToolsEnums
+export default {
+  name: 'ImageViewer',
+  data() {
+    return {
+      rows: 1,
+      cols: 1,
+      fullScreenIndex: null,
+      imageIds: [],
+      layout: '1*1',
+      cellsMax: 4,
+      activeTool: '',
+      imageType: ['image/jpeg', 'image/jpg', 'image/bmp', 'image/png'],
+      loading: false,
+      trialId: null,
+      activeName: '1',
+      tools: [],
+      viewportInfos: [],
+      activeCanvasIndex: 0,
+    }
+  },
+  computed: {
+    gridStyle() {
+      return {
+        display: 'grid',
+        gridTemplateRows: `repeat(${this.rows}, 1fr)`,
+        gridTemplateColumns: `repeat(${this.cols}, 1fr)`,
+        height: '100%',
+        width: '100%'
+      }
+    },
+    cellStyle() {
+      return {
+        border: '1px dashed #ccc',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    },
+    cells() {
+      return Array(this.rows * this.cols).fill(0)
+    }
+  },
+  mounted() {
+    this.tools = config.customizeStandardsNoneDicom
+    this.trialId = this.$route.query.trialId
+    this.viewportInfos = Array.from({ length: this.cellsMax }, (_, index) => ({
+      index: index,
+      studyId: '',
+      currentImageIdIndex: 0,
+      viewportId: `canvas-${index}`,
+      fileType: '',
+      currentFileName: '',
+      currentFilePath: '',
+      imageIds: [],
+      oldB: null,
+      oldM: null,
+      isMove: false,
+      height: 0
+    }))
+    this.initLoader()
+    this.$refs['viewports-wrapper'].addEventListener('wheel', (e) => {
+      this.setToolsPassive()
+    });
+  },
+  methods: {
+    showPanel(e) {
+      e.currentTarget.firstChild.lastChild.style.display = 'block'
+    },
+    toolMouseout(e) {
+      e.currentTarget.firstChild.lastChild.style.display = 'none'
+    },
+    // 初始化加载器
+    async initLoader() {
+      registerWebImageLoader(imageLoader)
+      await initLibraries()
+
+      let renderingEngine = getRenderingEngine(renderingEngineId)
+      if (!renderingEngine) {
+        renderingEngine = new RenderingEngine(renderingEngineId)
+      }
+      const resizeObserver = new ResizeObserver(() => {
+        const renderingEngine = getRenderingEngine(renderingEngineId)
+        if (renderingEngine) {
+          renderingEngine.resize(true, false)
+        }
+      })
+      const element1 = this.$refs['canvas-0'][0]
+      const element2 = this.$refs['canvas-1'][0]
+      const element3 = this.$refs['canvas-2'][0]
+      const element4 = this.$refs['canvas-3'][0]
+      const elements = [
+        element1,
+        element2,
+        element3,
+        element4
+      ]
+      elements.forEach((element, i) => {
+        element.oncontextmenu = (e) => e.preventDefault()
+        resizeObserver.observe(element)
+        element.addEventListener('CORNERSTONE_STACK_NEW_IMAGE', this.stackNewImage)
+      })
+      const viewportInputArray = [
+        {
+          viewportId: 'canvas-0',
+          type: ViewportType.STACK,
+          element: element1
+        },
+        {
+          viewportId: 'canvas-1',
+          type: ViewportType.STACK,
+          element: element2
+        },
+        {
+          viewportId: 'canvas-2',
+          type: ViewportType.STACK,
+          element: element3
+        },
+        {
+          viewportId: 'canvas-3',
+          type: ViewportType.STACK,
+          element: element4
+        }
+      ]
+      const viewportIds = ['canvas-0', 'canvas-1', 'canvas-2', 'canvas-3']
+      renderingEngine.setViewports(viewportInputArray)
+      cornerstoneTools.addTool(StackScrollTool)
+      cornerstoneTools.addTool(PanTool)
+      cornerstoneTools.addTool(ZoomTool)
+      cornerstoneTools.addTool(PlanarRotateTool)
+      cornerstoneTools.addTool(ArrowAnnotateTool)
+      cornerstoneTools.addTool(RectangleROITool)
+      cornerstoneTools.addTool(EllipticalROITool)
+      cornerstoneTools.addTool(CircleROITool)
+      cornerstoneTools.addTool(AngleTool)
+      cornerstoneTools.addTool(PlanarFreehandROITool)
+      cornerstoneTools.addTool(SplineROITool)
+      cornerstoneTools.addTool(EraserTool)
+      cornerstoneTools.addTool(LengthTool)
+      cornerstoneTools.addTool(LengthscaleTool)
+      cornerstoneTools.addTool(BidirectionalTool)
+      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)
+        toolGroup.addTool(RectangleROITool.toolName)
+        toolGroup.addTool(BidirectionalTool.toolName)
+        toolGroup.addTool(EllipticalROITool.toolName)
+        toolGroup.addTool(CircleROITool.toolName)
+        toolGroup.addTool(AngleTool.toolName)
+        toolGroup.addTool(PlanarFreehandROITool.toolName)
+        toolGroup.addTool(SplineROITool.toolName)
+
+        toolGroup.addTool(EraserTool.toolName)
+        toolGroup.addTool(LengthTool.toolName)
+        toolGroup.addTool(LengthscaleTool.toolName)
+
+        toolGroup.setToolActive(StackScrollTool.toolName, {
+          bindings: [{ mouseButton: MouseBindings.Wheel }]
+        })
+        toolGroup.setToolPassive(PanTool.toolName)
+        toolGroup.setToolPassive(ZoomTool.toolName)
+        toolGroup.setToolPassive(PlanarRotateTool.toolName)
+        toolGroup.setToolPassive(EraserTool.toolName)
+      })
+    },
+    lengthscaleToolDisabled(saved) {
+      const viewportIds = ['canvas-0', 'canvas-1', 'canvas-2', 'canvas-3']
+      viewportIds.forEach(toolGroupId => {
+        const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
+        if (saved) {
+          toolGroup.setToolPassive(LengthscaleTool.toolName)
+        } else {
+          toolGroup.setToolEnabled(LengthscaleTool.toolName)
+        }
+      })
+    },
+    // 加载图片回调
+    stackNewImage(e) {
+      const { detail } = e
+      const i = this.viewportInfos.findIndex(i => i.viewportId === detail.viewportId)
+      if (i === -1) return
+      this.viewportInfos[i].currentImageIdIndex = detail.imageIdIndex
+      const obj = this.viewportInfos[i].fileList[detail.imageIdIndex]
+      if (!obj) return
+      this.viewportInfos[i].currentFileName = obj.FileName
+      const total = this.viewportInfos[i].imageIds.length
+      this.viewportInfos[i].height = total > 1 ? (this.viewportInfos[i].currentImageIdIndex) * 100 / (total - 1) : 0
+      this.$emit('toggleImage', {
+        studyId: this.viewportInfos[i].studyId,
+        path: obj.Path
+      })
+    },
+    // 渲染图片
+    async renderImage(imageIds, canvasIndex, sliceIndex) {
+      metaData.addProvider((type, imageId) => hardcodedMetaDataProvider(type, imageId, imageIds), 10000)
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewport = renderingEngine.getViewport(`canvas-${canvasIndex}`)
+      await viewport.setStack(imageIds)
+      this.setToolsPassive()
+      viewport.setImageIdIndex(sliceIndex)
+      viewport.render()
+      // this.updateViewportInfos()
+    },
+    setActiveCanvasImages(obj) {
+      if (!obj || Object.keys(obj).length === 0) return
+      const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
+      if (i === -1) return
+      if (obj.studyId === this.viewportInfos[i].studyId && this.imageType.includes(this.viewportInfos[i].fileType) && this.imageType.includes(obj.fileInfo.FileType)) {
+        const fileIndex = this.viewportInfos[i].fileList.findIndex(i => i.Path === obj.fileInfo.Path)
+        this.sliceIndex(fileIndex)
+      } else {
+        if (!this.imageType.includes(obj.fileInfo.FileType)) {
+          this.fullScreenIndex = null
+        }
+        this.updateViewportInfos(this.activeCanvasIndex, obj)
+      }
+      this.setToolsPassive()
+    },
+    // 激活视图
+    activeCanvas(index) {
+      if (this.activeCanvasIndex === index) return
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1) return
+      this.activeCanvasIndex = index
+      this.setToolsPassive()
+    },
+    // 更新视图信息
+    updateViewportInfos(index, obj) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1) return
+
+      this.viewportInfos[i].taskInfo = obj.visitTaskInfo
+
+      this.viewportInfos[i].currentFileName = obj.fileInfo.FileName
+      this.viewportInfos[i].studyId = obj.studyId
+      this.viewportInfos[i].fileType = obj.fileInfo.FileType
+      if (this.imageType.includes(obj.fileInfo.FileType)) {
+        const arr = obj.fileList.filter(i => this.imageType.includes(i.FileType))
+        this.viewportInfos[i].fileList = arr
+        const fileIndex = this.viewportInfos[i].fileList.findIndex(i => i.Path === obj.fileInfo.Path)
+        this.viewportInfos[i].currentImageIdIndex = fileIndex
+        const imageIds = []
+        for (let i = 0; i < arr.length; i++) {
+          const path = arr[i].Path
+          imageIds.push(`web:${this.OSSclientConfig.basePath}${path}`)
+        }
+        this.viewportInfos[i].imageIds = imageIds
+        if (imageIds.length > 0) {
+          this.renderImage(imageIds, index, fileIndex)
+        }
+        this.$nextTick(() => {
+          const renderingEngine = getRenderingEngine(renderingEngineId)
+          if (renderingEngine) {
+            renderingEngine.resize(true, false)
+          }
+        })
+      } else {
+        this.viewportInfos[i].currentFilePath = obj.fileInfo.Path
+      }
+    },
+    // 切换图片
+    sliceIndex(index) {
+      const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
+      if (i === -1) return
+      if (index < 0 || index >= this.viewportInfos[i].imageIds.length) return
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewport = renderingEngine.getViewport(
+        this.viewportInfos[i].viewportId
+      )
+      this.setToolsPassive()
+      viewport.setImageIdIndex(index)
+      viewport.render()
+    },
+    // 更改视图布局
+    handleCommand(command) {
+      this.fullScreenIndex = null
+      this.layout = command
+      this.rows = parseInt(command.split('*')[0])
+      this.cols = parseInt(command.split('*')[1])
+      if (this.rows === 1 && this.cols === 1) {
+        this.$nextTick(() => {
+          this.activeCanvas(0)
+        })
+      }
+    },
+    handleLayoutChange(event) {
+      this.handleCommand(event.target.value.replace('x', '*'))
+    },
+    getCellStyle(index) {
+      return {
+        ...this.cellStyle,
+        display: index < this.cells.length ? this.cellStyle.display : 'none'
+      }
+    },
+    // 切换全屏
+    toggleFullScreen(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1) return
+      if (!this.viewportInfos[i].currentFileName) return
+      if (this.imageType.includes(this.viewportInfos[i].fileType)) {
+        this.fullScreenIndex = this.fullScreenIndex === index ? null : index
+        this.activeCanvasIndex = index
+      }
+    },
+    // 激活工具
+    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
+      }
+    },
+    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 = ''
+    },
+    // 重置视图
+    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()
+    },
+    setZoomScale(isZoomIn) {
+      this.setToolsPassive()
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewportId = `canvas-${this.activeCanvasIndex}`
+      const viewport = renderingEngine?.getViewport(viewportId)
+      if (!viewport) return
+      const camera = viewport.getCamera()
+      const factor = 1.1
+      const current = Number(camera.parallelScale)
+      if (!Number.isFinite(current) || current <= 0) return
+      const next = isZoomIn ? current / factor : current * factor
+      const parallelScale = Math.max(0.0001, Math.min(1000000, next))
+      viewport.setCamera({ parallelScale })
+      viewport.render()
+    },
+    // 滚动条
+    clickSlider(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1) return
+      const sliderBox = this.$refs[`sliderBox-${index}`] && this.$refs[`sliderBox-${index}`][0]
+      if (!sliderBox || !this.imageType.includes(this.viewportInfos[i].fileType)) return
+      const boxHeight = sliderBox.clientHeight
+      if (!boxHeight || !this.viewportInfos[i].imageIds.length) return
+      const height = e.offsetY * 100 / boxHeight
+      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
+      )
+      this.setToolsPassive()
+      viewport.setImageIdIndex(sliceIdx)
+      viewport.render()
+    },
+    sliderMouseup(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1 || !this.imageType.includes(this.viewportInfos[i].fileType)) return
+      this.viewportInfos[i].isMove = false
+    },
+    sliderMousemove(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1 || !this.imageType.includes(this.viewportInfos[i].fileType)) return
+      if (!this.viewportInfos[i].isMove) return
+      const sliderBox = this.$refs[`sliderBox-${index}`] && this.$refs[`sliderBox-${index}`][0]
+      if (!sliderBox || !this.viewportInfos[i].imageIds.length) return
+      const delta = this.viewportInfos[i].oldB - (this.viewportInfos[i].oldM - e.clientY)
+      const boxHeight = sliderBox.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
+      )
+      this.setToolsPassive()
+      viewport.setImageIdIndex(sliceIdx)
+      viewport.render()
+      // }
+      // this.$emit('toggleImage', { taskId: this.viewportInfos[i].taskInfo.VisitTaskId, studyId: this.viewportInfos[i].studyId, imageIndex: sliceIdx })
+    },
+    sliderMouseleave(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1 || !this.imageType.includes(this.viewportInfos[i].fileType)) return
+      if (!this.viewportInfos[i].isMove) return
+      this.viewportInfos[i].isMove = false
+    },
+    sliderMousedown(e, index) {
+      const i = this.viewportInfos.findIndex(i => i.index === index)
+      if (i === -1 || !this.imageType.includes(this.viewportInfos[i].fileType)) return
+      const sliderBox = this.$refs[`sliderBox-${index}`] && this.$refs[`sliderBox-${index}`][0]
+      if (!sliderBox || !this.viewportInfos[i].imageIds.length) return
+      const boxHeight = sliderBox.clientHeight
+      const sliderTop = parseFloat(e.currentTarget.style.top) || 0
+      this.viewportInfos[i].oldB = sliderTop * boxHeight / 100
+      this.viewportInfos[i].oldM = e.clientY
+      this.viewportInfos[i].isMove = true
+      e.stopImmediatePropagation()
+      e.stopPropagation()
+      e.preventDefault()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  cursor: default !important;
+}
+
+.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;
+  }
+
+  .customize-standards-list {
+    width: max-content;
+    white-space: nowrap;
+
+    li a {
+      display: flex;
+      align-items: center;
+      padding: 8px !important;
+      box-sizing: border-box;
+    }
+  }
+}
+
+.none-dicom-viewer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  background: #000;
+
+  .dicom-tools {
+    width: 300px;
+    height: 100%;
+    background-color: #323232;
+    margin: 0 0 0 2px;
+    padding: 0;
+    color: #d0d0d0;
+    font-size: 13px;
+    overflow-y: auto;
+  }
+
+  .sideTool-title {
+    padding: 5px 8px;
+    background-color: #525252;
+    color: #bebdbd;
+    font-size: 14px;
+    margin: 4px;
+  }
+
+  .sideTool-wrapper {
+    border-bottom: 1px solid gray;
+    margin: 0 4px;
+    padding: 4px;
+    font-size: 12px;
+  }
+
+  .sidetool-select {
+    height: 30px;
+    background-color: rgba(0, 0, 0, 0);
+    color: #d0d0d0;
+    border-radius: 4px;
+    border: 1px solid #5b5b5b;
+  }
+
+  .sidetool-select > option {
+    background-color: #323232;
+  }
+
+  .sideTool-wrapper button.btn-link {
+    height: 40px;
+    padding: 8px !important;
+    border: 1px solid rgba(37, 37, 37, 1);
+    margin: 1px 1px;
+  }
+
+  .sideTool-wrapper .btn-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    color: #cccccc;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  .activeTool {
+    background: #16477b90 !important;
+    border: none !important;
+  }
+
+  .sideTool-wrapper label {
+    display: inline-block;
+    min-width: 44px;
+    margin-right: 6px;
+  }
+
+  .viewports-wrapper {
+    flex: 1;
+    min-width: 0;
+
+    .grid-container {
+      display: grid;
+      height: 100%;
+      width: 100%;
+      position: relative;
+    }
+
+    .grid-cell {
+      border: 1px dashed #ccc;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      min-width: 0;
+      min-height: 0;
+      z-index: 1;
+    }
+
+    .cell_active {
+      border-color: #fafa00 !important;
+    }
+
+    .cell-full-screen {
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
+    }
+
+    .flex_col {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .content {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .left-top-text {
+        position: absolute;
+        left: 5px;
+        top: 5px;
+        color: #ddd;
+        z-index: 1;
+        font-size: 12px;
+
+        .cd-info {
+          color: #ddd;
+          font-size: 18px;
+        }
+
+        .subject-info {
+          color: #f44336;
+          padding: 5px 0px;
+          margin: 0;
+        }
+      }
+
+      .top-center-tool {
+        position: absolute;
+        left: 50%;
+        top: 5px;
+        transform: translateX(-50%);
+        z-index: 1;
+
+        .toggle-visit-container {
+          display: flex;
+        }
+
+        .arrw_icon {
+          width: 20px;
+          height: 20px;
+          background-color: #3f3f3f;
+          text-align: center;
+          line-height: 20px;
+          border-radius: 10%;
+        }
+
+        .arrow_text {
+          height: 20px;
+          line-height: 20px;
+          background-color: #00000057;
+          color: #fff;
+          padding: 0 10px;
+          font-size: 14px;
+        }
+      }
+
+      .right-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
+      }
+
+      .content-main {
+        position: relative;
+        overflow: hidden;
+        background: #1e1e1e;
+      }
+
+      video {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        object-position: center center;
+        background: transparent;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/none-dicoms/components/study-list.vue b/src/views/none-dicoms/components/study-list.vue
new file mode 100644
index 00000000..1ba7a259
--- /dev/null
+++ b/src/views/none-dicoms/components/study-list.vue
@@ -0,0 +1,456 @@
+<template>
+  <div v-loading="loading" class="none-dicom-study-wrapper">
+    <div class="study-info">
+      {{ $t('trials:none-dicom-show:fileList') }}
+    </div>
+    <div class="ps" ref="studyBox_ps">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item v-for="(study, index) in studyList" :key="`${study.Id}`" :name="`${study.Id}`">
+          <template slot="title">
+            <div class="dicom-desc">
+              <div style="text-overflow: ellipsis;overflow: hidden;">
+                <span :title="study.CodeView">{{ study.CodeView }}</span>
+                <span 
+                  v-if="otherInfo && otherInfo.IsShowStudyName" 
+                  :title="study.StudyName" 
+                  style="margin-left: 5px;"
+                >
+                  {{study.StudyName }}
+                </span>
+              </div>
+              <div style="text-overflow: ellipsis;overflow: hidden;">
+                <span :title="study.BodyPart">{{ getBodyPart(study.BodyPart, study.BodyPartForEditOther) }}</span>
+                <span style="margin-left: 5px;" :title="study.Modality">{{ study.Modality }}</span>
+              </div>
+            </div>
+          </template>
+          <div class="file-list-container">
+            <div v-for="(k, i) in study.NoneDicomStudyFileList" :key="i" style="position:relative;margin-top:1px;"
+              @click="selectFile(study, index, i, k)" :ref="`noneDicomRef_${index}_${i}`">
+              <div :class="{ 'file-active': index === activeStudyIndex && i === activeFileIndex }" class="file-wrapper">
+                <div class="file-main">
+                  <div class="file-image">
+                    <el-image
+                      v-if="k.FileType === 'image/jpeg' || k.FileType === 'image/jpg' || k.FileType === 'image/bmp' || k.FileType === 'image/png'"
+                      style="width: 100%;height: 100%;"
+                      :src="`${OSSclientConfig.basePath}${k.Path}?x-oss-process=image/resize,w_50,h_50/format,png`"
+                      fit="contain" crossorigin="anonymous" />
+                    <el-image v-else-if="k.FileType === 'application/pdf'" style="width: 100%;height: 100%;" :src="pdf"
+                      fit="contain" crossorigin="anonymous" />
+                    <el-image v-else-if="
+                      !!~k.FileType.indexOf('mp4')
+                    " style="width: 100%; height: 100%" :src="mp4" fit="contain" crossorigin="anonymous" />
+                  </div>
+                  <div class="file-text" :title="k.FileName">
+                    {{ k.FileName }}
+                  </div>
+                </div>
+                <div v-if="isQcCheck" class="switchBox">
+                  <div class="item">
+                    <span>{{ $t('trials:audit:table:isReading') }}</span>
+                    <el-switch
+                      v-model="k.IsReading"
+                      :disabled="k.IsDeleted || isAudit"
+                      :active-text="$fd('YesOrNo', true)"
+                      :inactive-text="$fd('YesOrNo', false)"
+                      @change="changeReadingStatus($event, study, k)"
+                    />
+                  </div>
+                  <div class="item">
+                    <span>{{ $t('trials:audit:table:isDelete') }}</span>
+                    <el-switch
+                      v-model="k.IsDeleted"
+                      :disabled="isAudit"
+                      :active-text="$fd('YesOrNo', true)"
+                      :inactive-text="$fd('YesOrNo', false)"
+                      @change="changeDeleteStatus($event, study, k)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import { getNoneDicomStudyList, setNodicomStudyState } from '@/api/trials'
+import pdf from '@/assets/pdf.png'
+import mp4 from '@/assets/mp4.png'
+export default {
+  name: 'StudyList',
+  props: {
+    visitTaskInfo: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      activeNames: [],
+      activeStudyIndex: -1,
+      activeFileIndex: -1,
+      studyList: [],
+      pdf,
+      mp4,
+      BodyPart: {},
+      subjectVisitId: '',
+      studyId: '',
+      otherInfo: null,
+      criterionType: null,
+      isQcCheck: false,
+      isAudit: false
+    }
+  },
+  async mounted() {
+    this.subjectVisitId = this.$route.query.subjectVisitId
+    this.studyId = this.$route.query.studyId
+    this.isQcCheck = !!this.$route.query.isQcCheck
+    this.getNoneDicoms()
+    
+    // this.$nextTick(() => {
+    //   this.activeStudy(this.studyList[0].Id)
+    // })
+    this.BodyPart.Bodypart = await this.$getBodyPart(this.$route.query.trialId)
+  },
+  methods: {
+    scrollActiveFileIntoView() {
+      this.$nextTick(() => {
+        const refKey = `noneDicomRef_${this.activeStudyIndex}_${this.activeFileIndex}`
+        const targetRef = this.$refs[refKey]
+        const element = Array.isArray(targetRef) ? targetRef[0] : targetRef
+        if (!element) return
+        this.scrollElementToVisible(element)
+      })
+    },
+    scrollElementToVisible(element, options = {}) {
+      const container = this.$refs['studyBox_ps']
+      if (!container || !element) return
+      const elementTop = element.offsetTop
+      const elementBottom = elementTop + element.offsetHeight
+      const visibleTop = container.scrollTop
+      const visibleBottom = visibleTop + container.clientHeight
+      if (elementTop >= visibleTop && elementBottom <= visibleBottom) return
+      const offset = options.offset != null
+        ? options.offset
+        : Math.max((container.clientHeight - element.offsetHeight) / 2, 0)
+      const targetPosition = Math.max(elementTop - offset, 0)
+      container.scrollTo({
+        top: targetPosition,
+        behavior: options.behavior || 'smooth'
+      })
+    },
+    async getNoneDicoms() {
+      const loading = this.$loading({ fullscreen: true })
+      try {
+        let res = await getNoneDicomStudyList(
+          this.subjectVisitId,
+          this.studyId,
+          false,
+          this.$route.query.visitTaskId,
+          !!this.$route.query.isReading,
+          this.$route.query.isImageSegmentLabel,
+        )
+        this.studyList = res.Result
+        this.otherInfo = res.OtherInfo
+        this.isAudit = res.OtherInfo.AuditState * 1 > 6
+        const studyIndex = this.studyList.findIndex((item) => {
+            return item.NoneDicomStudyFileList.length > 0
+          })
+        if (studyIndex > -1) {
+          this.selectFile(this.studyList[studyIndex], studyIndex, 0)
+          let studyId = this.studyList[studyIndex].Id
+          this.activeNames = [studyId]
+        }
+        if (this.criterionType === 19 || this.criterionType === 20) {
+          this.sortFile()
+        }
+        loading.close()
+      } catch(e) {
+        console.log(e)
+        loading.close()
+      }
+      
+    },
+    selected() {
+
+    },
+    sortFile() {
+
+    },
+    changeReadingStatus(callback, row, file) {
+      let statusStr = ''
+      if (callback) {
+        statusStr = this.$t('trials:audit:label:setSeriesReading')
+        file.IsReading = false
+      } else {
+        statusStr = this.$t('trials:audit:label:setSeriesNotReading')
+        file.IsReading = true
+      }
+      let message = this.$t('trials:audit:message:changeSeriesStatus').replace('xxx', statusStr)
+      message = message.replace('yyy', this.$fd('YesOrNo', !file.IsReading))
+      this.$confirm(message, {
+        distinguishCancelAndClose: true,
+        type: 'warning',
+      })
+        .then(() => {
+          const state = file.IsReading ? 1 : 2
+          this.loading = true
+          const params = {
+            SubjectVisitId: row.SubjectVisitId,
+            NoneDicomStudyId: row.Id,
+            State: state,
+            NoneDicomStudyFileId: file.Id,
+          }
+          return setNodicomStudyState(params)
+            .then((res) => {
+              this.loading = false
+              if (res.IsSuccess) {
+                this.$message.success(this.$t('common:message:savedSuccessfully'))
+                file.IsReading = !file.IsReading
+              }
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        })
+        .catch(() => { })
+    },
+    changeDeleteStatus(callback, row, file) {
+      let statusStr = ''
+      if (callback) {
+        statusStr = this.$t('trials:audit:label:setSeriesDeleted')
+        file.IsDeleted = false
+      } else {
+        statusStr = this.$t('trials:audit:label:setSeriesNotDelete')
+        file.IsDeleted = true
+      }
+      let message = this.$t('trials:audit:message:changeSeriesStatus').replace('xxx', statusStr)
+      message = message.replace('yyy', this.$fd('YesOrNo', !file.IsDeleted))
+      this.$confirm(message, {
+        distinguishCancelAndClose: true,
+        type: 'warning',
+      })
+        .then(() => {
+          const state = file.IsDeleted ? 5 : 4
+          this.loading = true
+          const params = {
+            SubjectVisitId: row.SubjectVisitId,
+            NoneDicomStudyId: row.Id,
+            State: state,
+            NoneDicomStudyFileId: file.Id,
+          }
+          return setNodicomStudyState(params)
+            .then((res) => {
+              this.loading = false
+              if (res.IsSuccess) {
+                this.$message.success(this.$t('common:message:savedSuccessfully'))
+                file.IsDeleted = !file.IsDeleted
+              }
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        })
+        .catch(() => { })
+    },
+    getBodyPart(bodyPart, other) {
+      if (!bodyPart && !other) return ''
+      var separator = ','
+      if (bodyPart.indexOf('|') > -1) {
+        separator = '|'
+      } else if (bodyPart.indexOf(',') > -1) {
+        separator = ','
+      } else if (bodyPart.indexOf('，') > -1) {
+        separator = '，'
+      }
+      var arr = bodyPart.split(separator)
+      var newArr = arr.map((i) => {
+        return this.$fd('Bodypart', i.trim(), 'Code', this.BodyPart, 'Name')
+      })
+      if (other) {
+        newArr.push(other)
+      }
+      newArr = newArr.filter(Boolean)
+      return newArr.join(' | ')
+    },
+    // 切换文件
+    selectFile(study, studyIndex, fileIndex) {
+      this.activeStudyIndex = studyIndex
+      this.activeFileIndex = fileIndex
+      const fileList = study.NoneDicomStudyFileList
+      this.$emit('selectFile', { fileInfo: fileList[fileIndex], fileList, visitTaskInfo: this.visitTaskInfo, studyId: study.Id })
+      this.scrollActiveFileIntoView()
+    },
+    activeImage(obj) {
+      if (!obj || this.studyList.length === 0) return
+      const studyIndex = this.studyList.findIndex(i => i.Id === obj.studyId)
+      if (studyIndex === -1) return
+      this.activeStudy(`${obj.studyId}`)
+      this.activeStudyIndex = studyIndex
+      const fileList = this.studyList[studyIndex].NoneDicomStudyFileList || []
+      const fileIndex = fileList.findIndex(f => f.Path === obj.path)
+      if (fileIndex === -1) return
+      this.activeFileIndex = fileIndex
+      this.scrollActiveFileIntoView()
+    },
+    activeStudy(id) {
+      const studyId = `${id}`
+      if (this.activeNames.indexOf(studyId) > -1) return
+      this.activeNames.push(studyId)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.none-dicom-study-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .study-info {
+    font-size: 16px;
+    font-weight: bold;
+    color: #ddd;
+    // padding: 5px 0px;
+    margin: 0;
+    text-align: center;
+    background-color: #4c4c4c;
+    line-height: 40px;
+  }
+
+  .dicom-desc {
+    font-weight: bold;
+    font-size: 13px;
+    text-align: left;
+    color: #d0d0d0;
+    padding: 2px 8px 2px 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ps {
+    flex: 1;
+    overflow-anchor: none;
+    touch-action: auto;
+    overflow-y: auto;
+  }
+
+  .file-active {
+    // background: #16477b;
+    background-color: #183553 !important;
+    border: 1px solid #23527b !important;
+  }
+
+  ::v-deep .el-progress__text {
+    color: #ccc;
+    font-size: 12px;
+  }
+
+  .file-list-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    .file-wrapper {
+      width: 100%;
+      padding: 5px;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      cursor: pointer;
+      background-color: #3a3a3a;
+
+      // color: #ddd;
+      // white-space: nowrap;
+      // overflow: hidden;
+      // text-overflow: ellipsis;
+      .file-main {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-width: 0;
+      }
+
+      .el-progress__text {
+        display: none;
+      }
+
+      .el-progress-bar {
+        padding-right: 0px;
+      }
+
+      .file-image {
+        width: 50px;
+        height: 50px;
+      }
+
+      .file-text {
+        flex: 1;
+        padding-left: 5px;
+        color: #ddd;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+    }
+  }
+
+  .switchBox {
+    width: 100%;
+    margin-top: 6px;
+    color: #ddd;
+
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 5px;
+    }
+
+    .item:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ::v-deep .el-collapse {
+    border: none;
+
+    .el-collapse-item {
+      background-color: #000 !important;
+      color: #ddd;
+    }
+
+    .el-collapse-item__content {
+      padding-bottom: 0px;
+      background-color: #000 !important;
+    }
+
+    .el-collapse-item__header {
+      background-color: #353535 !important;
+      color: #ddd;
+      border-bottom-color: #5a5a5a;
+      padding-left: 5px;
+      height: 60px;
+      line-height: 20px;
+    }
+  }
+
+
+
+  ::v-deep .el-progress-bar__inner {
+    transition: width 0s ease;
+  }
+}
+</style>
diff --git a/src/views/none-dicoms/index.vue b/src/views/none-dicoms/index.vue
new file mode 100644
index 00000000..81710669
--- /dev/null
+++ b/src/views/none-dicoms/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="read-page-container">
+    <!-- 检查列表 -->
+    <div class="left-panel">
+      <div class="study-info">
+        <study-list ref="studyList" @selectFile="selectFile"/>
+      </div>
+    </div>
+
+    <!-- 图像 -->
+    <div class="middle-panel">
+
+      <file-viewer ref="fileViewer" 
+        @toggleImage="toggleImage"
+        @selectFile="selectFile" />
+    </div>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { changeURLStatic } from '@/utils/history.js'
+import StudyList from './components/study-list'
+import FileViewer from './components/file-viewer'
+export default {
+  name: 'NoneDicoms',
+  components: {
+    StudyList,
+    FileViewer
+  },
+  data() {
+    return {
+    }
+  },
+
+  mounted() {
+    if (this.$route.query.TokenKey) {
+      store.dispatch('user/setToken', this.$route.query.TokenKey)
+      changeURLStatic('TokenKey', '')
+    }
+  },
+  methods: {
+    toggleImage(obj) {
+      this.$refs['studyList'].activeImage(obj)
+    },
+    selectFile(obj) {
+      if (obj.fileInfo && obj.fileList && obj.studyId) {
+        this.$refs['fileViewer'].setActiveCanvasImages(obj)
+        return
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.read-page-container {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  background-color: #444;
+  padding: 5px;
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #d0d0d0;
+  }
+
+  .left-panel {
+    display: flex;
+    width: 230px;
+    border: 1px solid #727272;
+    color: #fff;
+
+    ::-webkit-scrollbar {
+      width: 3px;
+      height: 3px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background: #d0d0d0;
+    }
+
+    .study-info {
+      width: 100%;
+      border-left: 1px solid #727272;
+    }
+  }
+
+  .middle-panel {
+    flex: 1;
+    border: 1px solid #727272;
+    margin: 0 5px;
+  }
+
+  // .right-panel {
+  //   width: 400px;
+  //   border: 1px solid #727272;
+  //   padding: 0 10px;
+  //   overflow-y: auto;
+
+  //   .text-info {
+  //     display: flex;
+  //     align-items: center;
+  //     justify-content: space-between;
+  //     color: #ddd;
+  //   }
+  // }
+
+  ::v-deep .dialog-container {
+    margin-top: 50px !important;
+    width: 75%;
+    height: 80%;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 20px 20px 0 20px;
+    height: calc(100% - 70px);
+  }
+
+  .el-dialog__header {
+    position: relative;
+  }
+
+  .full-dialog-container {
+    ::v-deep .is-fullscreen .el-dialog__body {
+      height: calc(100% - 70px);
+    }
+  }
+}
+</style>
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 98f51513..263318ac 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
@@ -107,12 +107,18 @@ export default {
   },
   methods: {
     scrollElementToTop(element, options = {}) {
-      const absoluteTop = element.offsetTop;
-      const targetPosition = absoluteTop - (options.offset || 0);
-      this.$refs['studyBox_ps'].scrollTo({
+      const container = this.$refs['studyBox_ps']
+      if (!container || !element) return
+      const elementTop = element.offsetTop
+      const elementBottom = elementTop + element.offsetHeight
+      const visibleTop = container.scrollTop
+      const visibleBottom = visibleTop + container.clientHeight
+      if (elementTop >= visibleTop && elementBottom <= visibleBottom) return
+      const targetPosition = Math.max(elementTop - (options.offset || 0), 0)
+      container.scrollTo({
         top: targetPosition,
         behavior: options.behavior || 'smooth'
-      });
+      })
     },
     getBodyPart(bodyPart, other) {
       if (!bodyPart && !other) return ''
diff --git a/src/views/trials/trials-panel/visit/qc-check/components/qualityAssurance.vue b/src/views/trials/trials-panel/visit/qc-check/components/qualityAssurance.vue
index 2b329033..fcbb6e42 100644
--- a/src/views/trials/trials-panel/visit/qc-check/components/qualityAssurance.vue
+++ b/src/views/trials/trials-panel/visit/qc-check/components/qualityAssurance.vue
@@ -2504,10 +2504,10 @@ export default {
       var token = getToken()
       const routeData = isReading
         ? this.$router.resolve({
-          path: `/showNoneDicoms?trialId=${trialId}&subjectVisitId=${this.data.Id}&TokenKey=${token}&isReading=1`,
+          path: `/noneDicoms?trialId=${trialId}&subjectVisitId=${this.data.Id}&TokenKey=${token}&isReading=1`,
         })
         : this.$router.resolve({
-          path: `/showNoneDicoms?trialId=${trialId}&subjectVisitId=${this.data.Id}&TokenKey=${token}&isQcCheck=${this.SecondReviewState > 0 ? 0 : 1}`,
+          path: `/noneDicoms?trialId=${trialId}&subjectVisitId=${this.data.Id}&TokenKey=${token}&isQcCheck=${this.SecondReviewState > 0 ? 0 : 1}`,
         })
       this.open = window.open(routeData.href, '_blank')
     },
@@ -2520,7 +2520,7 @@ export default {
       let trialId = this.$route.query.trialId
       var token = getToken()
       const routeData = this.$router.resolve({
-        path: `/showNoneDicoms?trialId=${trialId}&subjectVisitId=${this.data.Id}&studyId=${row.Id}&TokenKey=${token}&isQcCheck=${this.SecondReviewState > 0 ? 0 : 1}`,
+        path: `/noneDicoms?trialId=${trialId}&subjectVisitId=${this.data.Id}&studyId=${row.Id}&TokenKey=${token}&isQcCheck=${this.SecondReviewState > 0 ? 0 : 1}`,
       })
       this.open = window.open(routeData.href, '_blank')
     },