From 6cd5e7b9575107780c8aa4b205b1d89af6a8f2bd Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Mon, 22 Dec 2025 13:58:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=9Edicom=E9=98=85=E7=89=87=E3=80=81?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=B7=BB=E5=8A=A0=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/dcmUpload/dcmjs.js                  |   6 +-
 .../components/image-viewer.vue               |  77 ++---
 .../none-dicom-show/components/preview.vue    | 112 +++----
 src/views/none-dicom-show/index.vue           |  39 ++-
 .../dicoms/components/NoneDicomsCanvas.vue    | 305 +++++++++---------
 .../dicoms/components/NoneDicomsViewer.vue    | 113 +++----
 .../trials-panel/reading/dicoms/index.vue     |   2 +-
 .../reading/dicoms/none-dicoms.vue            |  45 ++-
 .../none-dicoms/components/VisitReview.vue    |  31 +-
 9 files changed, 391 insertions(+), 339 deletions(-)

diff --git a/src/utils/dcmUpload/dcmjs.js b/src/utils/dcmUpload/dcmjs.js
index e889d053..14b7abe8 100644
--- a/src/utils/dcmUpload/dcmjs.js
+++ b/src/utils/dcmUpload/dcmjs.js
@@ -8509,7 +8509,7 @@
 	      var _writeOptions$fragmen = writeOptions.fragmentMultiframe,
 	          fragmentMultiframe = _writeOptions$fragmen === void 0 ? true : _writeOptions$fragmen;
 		  var _writeOptions$offset = writeOptions.startOffset,
-	          startOffset = _writeOptions$offset === void 0 ? true : _writeOptions$offset;
+	          isNeedStartOffset = _writeOptions$offset === void 0 ? true : _writeOptions$offset;
 	      value = value === null || value === undefined ? [] : value;
 
 	      if (isEncapsulated) {
@@ -8537,7 +8537,9 @@
 	        for (i = 0; i < frames; i++) {
 	          var _needsPadding = Boolean(value[i].byteLength & 1);
 
-	          if (startOffset) startOffset.push(binaryStream.size);
+	          if (isNeedStartOffset) {
+				 startOffset.push(binaryStream.size);
+			  }
 	          var frameBuffer = value[i],
 	              frameStream = new ReadBufferStream(frameBuffer);
 	          var fragmentsLength = 1;
diff --git a/src/views/none-dicom-show/components/image-viewer.vue b/src/views/none-dicom-show/components/image-viewer.vue
index 92ec89b6..c92144ae 100644
--- a/src/views/none-dicom-show/components/image-viewer.vue
+++ b/src/views/none-dicom-show/components/image-viewer.vue
@@ -2,13 +2,8 @@
 <template>
   <div style="width: 100%; height: 100%">
     <transition name="viewer-fade">
-      <div
-        v-show="urlList.length > 0"
-        ref="image-viewer__wrapper"
-        tabindex="-1"
-        class="image-viewer__wrapper"
-        :style="{ 'z-index': 5 }"
-      >
+      <div v-show="urlList.length > 0" ref="image-viewer__wrapper" tabindex="-1" class="image-viewer__wrapper"
+        :style="{ 'z-index': 5 }">
         <span class="image-viewer_desc">
           <!-- <span v-if="studyCode">NST00006</span>
           <span v-if="modality">CT</span>
@@ -21,18 +16,12 @@
         </span>
         <!-- Arrow -->
         <template v-if="!isSingle">
-          <span
-            class="image-viewer__btn image-viewer__prev"
-            :class="{ 'is-disabled': !infinite && isFirst }"
-            @click="prev"
-          >
+          <span class="image-viewer__btn image-viewer__prev" :class="{ 'is-disabled': !infinite && isFirst }"
+            @click="prev">
             <i class="el-icon-arrow-left" />
           </span>
-          <span
-            class="el-image-viewer__btn el-image-viewer__next"
-            :class="{ 'is-disabled': !infinite && isLast }"
-            @click="next"
-          >
+          <span class="el-image-viewer__btn el-image-viewer__next" :class="{ 'is-disabled': !infinite && isLast }"
+            @click="next">
             <i class="el-icon-arrow-right" />
           </span>
         </template>
@@ -44,36 +33,19 @@
             <i class="el-image-viewer__actions__divider" />
             <i class="el-icon-c-scale-to-original" @click="toggleMode" />
             <i class="el-image-viewer__actions__divider" />
-            <i
-              class="el-icon-refresh-left"
-              @click="handleActions('anticlocelise')"
-            />
-            <i
-              class="el-icon-refresh-right"
-              @click="handleActions('clocelise')"
-            />
+            <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" />
+            <i class="el-icon-refresh-right" @click="handleActions('clocelise')" />
           </div>
         </div>
         <!-- 图片 -->
         <div id="image-viewer__canvas" class="image-viewer__canvas">
           <template v-for="(item, i) in urlList">
-            <img
-              v-if="!~item.FileType.indexOf('pdf')"
-              v-show="i === index"
-              :ref="`img${i}`"
-              :key="item.Id"
-              crossorigin="anonymous"
-              :src="
-                item.FileType && item.FileType.indexOf('zip') >= 0
-                  ? zipImg
-                  : `${OSSclientConfig.basePath}${item.Path}`
-              "
-              :style="imgStyle"
-              style="max-width: 100%; max-height: 100%"
-              @load="handleImgLoad"
-              @error="handleImgError"
-              @mousedown="handleMouseDown"
-            />
+            <img v-if="!~item.FileType.indexOf('pdf')" v-show="i === index" :ref="`img${i}`" :key="item.Id"
+              crossorigin="anonymous" :src="item.FileType && item.FileType.indexOf('zip') >= 0
+                ? zipImg
+                : `${OSSclientConfig.basePath}${item.Path}`
+                " :style="imgStyle" style="max-width: 100%; max-height: 100%" @load="handleImgLoad"
+              @error="handleImgError" @mousedown="handleMouseDown" />
           </template>
         </div>
       </div>
@@ -108,11 +80,11 @@ export default {
     },
     onSwitch: {
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     onClose: {
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     initialIndex: {
       type: Number,
@@ -172,7 +144,9 @@ export default {
       immediate: true,
       handler(val) {
         this.reset()
-        this.onSwitch(val)
+        if (val >= 0) {
+          this.onSwitch(this.urlList[val].Id)
+        }
       },
     },
   },
@@ -349,6 +323,7 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 .image-viewer__btn {
   position: absolute;
   z-index: 1;
@@ -370,6 +345,7 @@ export default {
   height: 40px;
   font-size: 40px;
 }
+
 .image-viewer_desc {
   position: absolute;
   top: 40px;
@@ -387,6 +363,7 @@ export default {
   border-radius: 17px;
   // border-radius: 2%;
 }
+
 .image-viewer__canvas {
   position: absolute;
   top: 50%;
@@ -397,6 +374,7 @@ export default {
   justify-content: center;
   align-items: center;
 }
+
 .image-viewer__actions {
   left: 50%;
   bottom: 30px;
@@ -408,6 +386,7 @@ export default {
   border-color: #fff;
   border-radius: 22px;
 }
+
 .image-viewer__actions__inner {
   width: 100%;
   height: 100%;
@@ -419,6 +398,7 @@ export default {
   align-items: center;
   justify-content: space-around;
 }
+
 .image-viewer__next,
 .image-viewer__prev {
   top: 50%;
@@ -429,15 +409,18 @@ export default {
   background-color: #606266;
   border-color: #fff;
 }
+
 .image-viewer__prev {
   transform: translateY(-50%);
   left: 40px;
 }
+
 .image-viewer__next {
   transform: translateY(-50%);
   right: 40px;
   text-indent: 2px;
 }
+
 .image-viewer__mask {
   position: absolute;
   width: 100%;
@@ -447,9 +430,11 @@ export default {
   opacity: 0.5;
   // background:#000
 }
+
 .viewer-fade-enter-active {
   animation: viewer-fade-in 0.3s;
 }
+
 .viewer-fade-leave-active {
   animation: viewer-fade-out 0.3s;
 }
@@ -459,6 +444,7 @@ export default {
     transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
+
   100% {
     transform: translate3d(0, 0, 0);
     opacity: 1;
@@ -470,6 +456,7 @@ export default {
     transform: translate3d(0, 0, 0);
     opacity: 1;
   }
+
   100% {
     transform: translate3d(0, -20px, 0);
     opacity: 0;
diff --git a/src/views/none-dicom-show/components/preview.vue b/src/views/none-dicom-show/components/preview.vue
index 7eedf98e..98aab393 100644
--- a/src/views/none-dicom-show/components/preview.vue
+++ b/src/views/none-dicom-show/components/preview.vue
@@ -2,56 +2,29 @@
   <div class="none-dicom_preview-wrapper">
     <div class="image-viewer-wrapper">
       <!-- 预览图像 -->
-      <ImageViewer
-        v-if="previewVisible"
-        :on-switch="
-          (index) => {
-            selected(index)
-          }
-        "
-        :initial-index="previewImage.index"
-        :url-list="previewImage.imgList"
-        :study-code="previewImage.studyCode"
-        :body-part="previewImage.bodyPart"
-        :modality="previewImage.modality"
-        :zip-img="zipImg"
-      />
+      <ImageViewer v-if="previewVisible" :on-switch="(index) => {
+        selected(index)
+      }
+        " :initial-index="previewImage.index" :url-list="previewImage.imgList" :study-code="previewImage.studyCode"
+        :body-part="previewImage.bodyPart" :modality="previewImage.modality" :zip-img="zipImg" />
     </div>
     <div class="thumbnail-wrapper" style="z-index: 999; background-color: #fff">
       <div class="">
         <div class="img-wrapper">
-          <el-button
-            icon="el-icon-d-arrow-left"
-            plain
-            class="left to"
-            :disabled="disabledPrev"
-            @click="toRight"
-          />
+          <el-button icon="el-icon-d-arrow-left" plain class="left to" :disabled="disabledPrev" @click="toRight" />
           <div ref="imagesWrapper" class="images">
             <div v-if="noData" class="empty-text">
               <slot name="empty">暂无数据</slot>
             </div>
             <div v-show="!noData" class="items" :style="itemsStyle">
               <template v-for="(item, index) in previewImage.imgList">
-                <div
-                  v-if="!~item.FileType.indexOf('pdf')"
-                  :key="index"
-                  class="item-img"
-                  :style="imgSize"
-                  :class="{
-                    'is-active': index === currentIndex,
-                  }"
-                  @click="selected(index)"
-                >
-                  <img
-                    :title="item.FileName"
-                    crossorigin="anonymous"
-                    :src="
-                      item.FileType && item.FileType.indexOf('zip') >= 0
-                        ? zipImg
-                        : `${OSSclientConfig.basePath}${item.Path}`
-                    "
-                  />
+                <div v-if="!~item.FileType.indexOf('pdf')" :key="index" class="item-img" :style="imgSize" :class="{
+                  'is-active': item.Id === currentFileId,
+                }" @click="selected(item.Id)">
+                  <img :title="item.FileName" crossorigin="anonymous" :src="item.FileType && item.FileType.indexOf('zip') >= 0
+                    ? zipImg
+                    : `${OSSclientConfig.basePath}${item.Path}`
+                    " />
                   <p v-if="item.FileName" class="item-date">
                     {{ `${index + 1}` }}
                   </p>
@@ -59,13 +32,7 @@
               </template>
             </div>
           </div>
-          <el-button
-            icon="el-icon-d-arrow-right"
-            :disabled="disabledNext"
-            plain
-            class="right to"
-            @click="Left"
-          />
+          <el-button icon="el-icon-d-arrow-right" :disabled="disabledNext" plain class="right to" @click="Left" />
         </div>
       </div>
     </div>
@@ -93,6 +60,10 @@ export default {
       type: Number,
       default: null,
     },
+    currentFileId: {
+      type: String,
+      default: ''
+    },
     previewImage: {
       type: Object,
       default: () => {
@@ -167,7 +138,7 @@ export default {
     const scope = this
     window.onresize = function () {
       scope.pageSize = scope.wrapperWidth() / scope.itemWidth
-      scope.selected(scope.currentIndex)
+      scope.selected(scope.currentFileId)
     }
   },
   methods: {
@@ -185,7 +156,8 @@ export default {
         this.translateX = maxTrans
       }
     },
-    selected(index) {
+    selected(id) {
+      let index = this.previewImage.imgList.findIndex(item => item.Id === id)
       const center = this.pageSize >> 1
       // 最后一页的中间位置
       const lastCenter = this.dataLength - center
@@ -202,7 +174,7 @@ export default {
       if (this.currentIndex !== index) {
         this.currentIndex = index
       }
-      this.$emit('selectedImg', index)
+      this.$emit('selectedImg', id)
     },
     wrapperWidth() {
       if (this.$refs.imagesWrapper) {
@@ -224,25 +196,30 @@ export default {
   .image-viewer-wrapper {
     flex: 1;
   }
+
   .thumbnail-wrapper {
     height: 130px;
   }
+
   .img-content {
     position: absolute;
     left: 0;
     bottom: 10px;
     width: 100%;
   }
+
   .img-wrapper {
     display: flex;
     position: relative;
     margin: 0 20px;
     height: 120px;
+
     .to {
       width: 32px;
       height: 100%;
       padding: 0;
     }
+
     .images::before {
       position: absolute;
       z-index: 5;
@@ -251,16 +228,15 @@ export default {
       width: 84px;
       content: '';
       pointer-events: none;
-      background: -webkit-gradient(
-        linear,
-        left top,
-        right top,
-        from(#fff),
-        color-stop(50%, rgba(0, 0, 0, 0))
-      );
+      background: -webkit-gradient(linear,
+          left top,
+          right top,
+          from(#fff),
+          color-stop(50%, rgba(0, 0, 0, 0)));
       background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%);
       background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%);
     }
+
     .images::after {
       position: absolute;
       z-index: 5;
@@ -270,22 +246,22 @@ export default {
       width: 84px;
       content: '';
       pointer-events: none;
-      background: -webkit-gradient(
-        linear,
-        right top,
-        left top,
-        from(#fff),
-        color-stop(50%, rgba(0, 0, 0, 0))
-      );
+      background: -webkit-gradient(linear,
+          right top,
+          left top,
+          from(#fff),
+          color-stop(50%, rgba(0, 0, 0, 0)));
       background: -o-linear-gradient(right, #fff, rgba(0, 0, 0, 0) 50%);
       background: linear-gradient(270deg, #fff, rgba(0, 0, 0, 0) 50%);
     }
+
     .images {
       position: relative;
       overflow: hidden;
       width: 100%;
       height: 100%;
       margin: 0 2px;
+
       .empty-text {
         color: rgb(158, 158, 158);
         height: 100%;
@@ -293,6 +269,7 @@ export default {
         align-items: center;
         justify-content: center;
       }
+
       .items {
         position: absolute;
         top: 0;
@@ -302,6 +279,7 @@ export default {
         height: 100%;
         align-items: center;
         transition: transform 0.25s ease;
+
         .item-img {
           display: inline-block;
           box-sizing: border-box;
@@ -309,6 +287,7 @@ export default {
           margin-right: 8px;
           border: 2px solid rgba(0, 0, 0, 0);
           cursor: pointer;
+
           .item-date {
             bottom: 0px;
             position: absolute;
@@ -319,15 +298,18 @@ export default {
             line-height: 24px;
             color: white;
           }
+
           img {
             width: 100%;
             height: 100%;
           }
         }
+
         .item-img:hover::after {
           // border-color: #409EFF;
           opacity: 0;
         }
+
         .item-img::after {
           position: absolute;
           top: 0;
@@ -342,9 +324,11 @@ export default {
           transition: opacity 0.3s ease;
           background-color: #fff;
         }
+
         .is-active {
           border-color: #409eff;
         }
+
         .is-active:after {
           opacity: 0;
         }
diff --git a/src/views/none-dicom-show/index.vue b/src/views/none-dicom-show/index.vue
index df9d1834..4b6a63f8 100644
--- a/src/views/none-dicom-show/index.vue
+++ b/src/views/none-dicom-show/index.vue
@@ -1,7 +1,11 @@
 <template>
   <div v-loading="loading" class="img-container">
     <el-card class="box-card left">
-      <div class="title">
+      <div class="title" style="display: flex;align-items: center;">
+        <div style="margin-right: 5px;cursor: pointer;" @click.stop="sortFile">
+          <i :class="['el-icon-caret-top', Asc ? '' : 'icon_check']" style="display: block;margin-bottom: -5px;"></i>
+          <i :class="['el-icon-caret-bottom', !Asc ? '' : 'icon_check']" style="display: block; margin-top: -5px;"></i>
+        </div>
         {{ $t('trials:none-dicom-show:fileList') }}
       </div>
       <div class="left-content">
@@ -77,7 +81,8 @@
     <el-card class="box-card right">
       <div style="width: 100%; height: 100%" v-if="!showPDF">
         <Preview v-if="previewImage.imgList.length > 0" ref="previewImage" style="width: 100%"
-          :preview-image="previewImage" :value="currentStudyFileIndex" @selectedImg="selectedImg" />
+          :preview-image="previewImage" :value="currentStudyFileIndex" @selectedImg="selectedImg"
+          :currentFileId="currentFileId" />
       </div>
       <div style="width: 100%; height: 100%" v-else>
         <PreviewFile :file-path="pdfFile.path" :file-type="pdfFile.type" />
@@ -140,6 +145,7 @@ export default {
       isAudit: false,
 
       activeNames: [],
+      Asc: false
     }
   },
   async created() {
@@ -157,6 +163,26 @@ export default {
     // 默认选择第一个文件
   },
   methods: {
+    sortFile() {
+      if (this.Asc) {
+        this.Asc = false
+      } else {
+        this.Asc = true
+      }
+      console.log(this.Asc, 'Asc')
+      this.studyList.forEach(study => {
+        if (study.NoneDicomStudyFileList.length > 0) {
+          if (this.Asc) {
+            study.NoneDicomStudyFileList.sort((a, b) => b.FileName.localeCompare(a.FileName))
+          } else {
+            study.NoneDicomStudyFileList.sort((a, b) => a.FileName.localeCompare(b.FileName))
+          }
+
+        }
+      })
+      this.previewImage.imgList = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList
+      this.previewImage.index = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === this.currentFileId)
+    },
     handleChange() { },
     changeReadingStatus(callback, row, file) {
       let statusStr = ''
@@ -321,12 +347,13 @@ export default {
       this.previewImage.modality = this.studyList[studyIndex].Modality
       this.$nextTick(() => {
         if (isChangeSub) {
-          this.$refs['previewImage'].selected(fileIndex)
+          this.$refs['previewImage'].selected(this.currentFileId)
         }
       })
     },
-    selectedImg(fileIndex) {
+    selectedImg(id) {
       if (this.studyList.length > 0) {
+        let fileIndex = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === id)
         this.currentStudyFileIndex = fileIndex
         this.currentFileId =
           this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[
@@ -354,6 +381,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.icon_check {
+  color: #409EFF;
+}
+
 .img-container {
   position: relative;
   width: 100%;
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsCanvas.vue b/src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsCanvas.vue
index 2fe1ebfe..01508b8f 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsCanvas.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsCanvas.vue
@@ -2,12 +2,13 @@
 <template>
   <div v-loading="loading" style="width:100%;height:100%;">
     <transition name="viewer-fade">
-      <div v-show="urlList.length > 0" ref="image-viewer__wrapper" tabindex="-1" class="image-viewer__wrapper" :style="{ 'z-index':5 }">
+      <div v-show="urlList.length > 0" ref="image-viewer__wrapper" tabindex="-1" class="image-viewer__wrapper"
+        :style="{ 'z-index': 5 }">
         <span class="image-viewer_desc">
           <!-- <span v-if="studyCode">NST00006</span>
           <span v-if="modality">CT</span>
           <span v-if="bodyPart">上/下腹部</span><br> -->
-          {{ `${index+1} / ${urlList.length}` }}
+          {{ `${index + 1} / ${urlList.length}` }}
         </span>
         <!-- 关闭 -->
         <span class="image-viewer__btn image-viewer__close" @click="hide">
@@ -15,18 +16,12 @@
         </span>
         <!-- Arrow -->
         <template v-if="!isSingle">
-          <span
-            class="image-viewer__btn image-viewer__prev"
-            :class="{ 'is-disabled': !infinite && isFirst }"
-            @click="prev"
-          >
+          <span class="image-viewer__btn image-viewer__prev" :class="{ 'is-disabled': !infinite && isFirst }"
+            @click="prev">
             <i class="el-icon-arrow-left" />
           </span>
-          <span
-            class="el-image-viewer__btn el-image-viewer__next"
-            :class="{ 'is-disabled': !infinite && isLast }"
-            @click="next"
-          >
+          <span class="el-image-viewer__btn el-image-viewer__next" :class="{ 'is-disabled': !infinite && isLast }"
+            @click="next">
             <i class="el-icon-arrow-right" />
           </span>
         </template>
@@ -40,34 +35,25 @@
             <i class="el-image-viewer__actions__divider" />
             <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" />
             <i class="el-icon-refresh-right" @click="handleActions('clocelise')" />
-            <i
-              v-if="readingTaskState < 2"
-              class="el-icon-bottom-right"
-              :style="{cursor:isToolDisabled || readingTaskState >=2 ?'not-allowed':'pointer'}"
-              @click="handleDrawArrow"
-            />
+            <i v-if="readingTaskState < 2" class="el-icon-bottom-right"
+              :style="{ cursor: isToolDisabled || readingTaskState >= 2 ? 'not-allowed' : 'pointer' }"
+              @click="handleDrawArrow" />
 
             <!-- <i
               class="rectangle"
               :style="{cursor:isToolDisabled || readingTaskState >=2 ?'not-allowed':'pointer'}"
               @click="handleDrawRectangle"
             /> -->
-            <svg-icon v-if="readingTaskState < 2" icon-class="rectangle" class="svg-icon" :style="{cursor:isToolDisabled || readingTaskState >=2 ?'not-allowed':'pointer'}" @click="handleDrawRectangle" />
+            <svg-icon v-if="readingTaskState < 2" icon-class="rectangle" class="svg-icon"
+              :style="{ cursor: isToolDisabled || readingTaskState >= 2 ? 'not-allowed' : 'pointer' }"
+              @click="handleDrawRectangle" />
           </div>
         </div>
         <!-- 图片 -->
         <div id="image-viewer__canvas" class="image-viewer__canvas">
-          <canvas
-            v-if="canvasSize.width && canvasPosition.y"
-            id="canvas"
-            :height="canvasSize.height"
-            :width="canvasSize.width"
-            :style="imgStyle"
-            @mousedown="handleMouseDown"
-            @mousemove="handleMouseMove"
-            @mouseup="handleMouseUp"
-            @contextmenu="handleContextmenu"
-          />
+          <canvas v-if="canvasSize.width && canvasPosition.y" id="canvas" :height="canvasSize.height"
+            :width="canvasSize.width" :style="imgStyle" @mousedown="handleMouseDown" @mousemove="handleMouseMove"
+            @mouseup="handleMouseUp" @contextmenu="handleContextmenu" />
 
         </div>
       </div>
@@ -111,11 +97,11 @@ export default {
     },
     onSwitch: {
       type: Function,
-      default: () => {}
+      default: () => { }
     },
     onClose: {
       type: Function,
-      default: () => {}
+      default: () => { }
     },
     initialIndex: {
       type: Number,
@@ -191,11 +177,15 @@ export default {
       immediate: true,
       handler(val) {
         this.reset()
-        this.onSwitch(val)
+        if (val >= 0) {
+          this.imgId = this.urlList[val].Id
+          this.onSwitch(this.imgId)
+
+          this.imgUrl = this.urlList[val].Path
+
+          this.loadImage()
+        }
 
-        this.imgUrl = this.urlList[val].Path
-        this.imgId = this.urlList[val].Id
-        this.loadImage()
       }
     }
   },
@@ -359,7 +349,7 @@ export default {
         y: canvasDiv.offsetHeight / 2 - img.height / 2 - 25
       } // 背景居中
 
-      this.$nextTick(async() => {
+      this.$nextTick(async () => {
         ctx = document.getElementById('canvas').getContext('2d') // 获取上下文
         await ctx.drawImage(img, 0, 0, img.width, img.height) // 在canvas中绘制图片(图片、起始位置、绘图尺寸)
         this.drawToArr()
@@ -779,42 +769,43 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-
-.image-viewer__wrapper{
-    position: relative;
-    top:0;
-    right:0;
-    bottom:0;
-    left:0;
-    width: 100%;
-    height: 100%;
-}
-.image-viewer__btn{
-    position:absolute;
-    z-index:1;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    border-radius:50%;
-    opacity:.8;
-    cursor:pointer;
-    box-sizing:border-box;
-    user-select:none
+.image-viewer__wrapper {
+  position: relative;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.image-viewer__close{
+.image-viewer__btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  opacity: .8;
+  cursor: pointer;
+  box-sizing: border-box;
+  user-select: none
+}
+
+.image-viewer__close {
   display: none;
-    top:40px;
-    right:40px;
-    width:40px;
-    height:40px;
-    font-size:40px
+  top: 40px;
+  right: 40px;
+  width: 40px;
+  height: 40px;
+  font-size: 40px
 }
-.image-viewer_desc{
-  position:absolute;
-  top:40px;
-  left:40px;
-  font-size:15px;
+
+.image-viewer_desc {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  font-size: 15px;
   padding: 5px;
   height: 30px;
   width: 70px;
@@ -827,92 +818,104 @@ export default {
   border-radius: 17px;
   // border-radius: 2%;
 }
-.image-viewer__canvas{
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width:100%;
-    height:100%;
-    display:flex;
-    justify-content:center;
-    align-items:center
-}
-.image-viewer__actions{
-    left:50%;
-    bottom:30px;
-    transform:translateX(-50%);
-    width:282px;
-    height:44px;
-    padding:0 23px;
-    background-color:#606266;
-    border-color:#fff;
-    border-radius:22px
-}
-.image-viewer__actions__inner{
-    width:100%;
-    height:100%;
-    text-align:justify;
-    cursor:default;
-    font-size:23px;
-    color:#fff;
-    display:flex;
-    align-items:center;
-    justify-content:space-around
-}
-.image-viewer__next,.image-viewer__prev{
-    top:50%;
-    width:44px;
-    height:44px;
-    font-size:24px;
-    color:#fff;
-    background-color:#606266;
-    border-color:#fff
-}
-.image-viewer__prev{
-    transform:translateY(-50%);
-    left:40px
-}
-.image-viewer__next{
-    transform:translateY(-50%);
-    right:40px;
-    text-indent:2px
-}
-.image-viewer__mask{
-    position:absolute;
-    width:100%;
-    height:100%;
-    top:0;
-    left:0;
-    opacity:.5;
-    // background:#000
 
-}
-.viewer-fade-enter-active{
-    animation:viewer-fade-in .3s
-}
-.viewer-fade-leave-active{
-    animation:viewer-fade-out .3s
+.image-viewer__canvas {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center
 }
 
-@keyframes viewer-fade-in{
-    0%{
-        transform:translate3d(0,-20px,0);
-        opacity:0
-    }
-    100%{
-        transform:translate3d(0,0,0);
-        opacity:1
-    }
+.image-viewer__actions {
+  left: 50%;
+  bottom: 30px;
+  transform: translateX(-50%);
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: #606266;
+  border-color: #fff;
+  border-radius: 22px
 }
 
-@keyframes viewer-fade-out{
-    0%{
-        transform:translate3d(0,0,0);
-        opacity:1
-    }
-    100%{
-        transform:translate3d(0,-20px,0);
-        opacity:0
-    }
+.image-viewer__actions__inner {
+  width: 100%;
+  height: 100%;
+  text-align: justify;
+  cursor: default;
+  font-size: 23px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around
+}
+
+.image-viewer__next,
+.image-viewer__prev {
+  top: 50%;
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: #606266;
+  border-color: #fff
+}
+
+.image-viewer__prev {
+  transform: translateY(-50%);
+  left: 40px
+}
+
+.image-viewer__next {
+  transform: translateY(-50%);
+  right: 40px;
+  text-indent: 2px
+}
+
+.image-viewer__mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: .5;
+  // background:#000
+
+}
+
+.viewer-fade-enter-active {
+  animation: viewer-fade-in .3s
+}
+
+.viewer-fade-leave-active {
+  animation: viewer-fade-out .3s
+}
+
+@keyframes viewer-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1
+  }
+}
+
+@keyframes viewer-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1
+  }
+
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0
+  }
 }
 </style>
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsViewer.vue b/src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsViewer.vue
index 94a7316d..6495dd67 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsViewer.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsViewer.vue
@@ -3,61 +3,33 @@
 
     <div class="image-viewer-wrapper">
       <!-- 预览图像 -->
-      <NoneDicomsCanvas
-        v-if="previewVisible"
-        :on-switch="
-          (index) => {
-            selected(index)
-          }
-        "
-        :initial-index="previewImage.index"
-        :url-list="previewImage.imgList"
-        :study-code="previewImage.studyCode"
-        :body-part="previewImage.bodyPart"
-        :modality="previewImage.modality"
-        :study-id="previewImage.studyId"
-        :reading-task-state="readingTaskState"
-      />
+      <NoneDicomsCanvas v-if="previewVisible" :on-switch="(index) => {
+        selected(index)
+      }
+        " :initial-index="previewImage.index" :url-list="previewImage.imgList" :study-code="previewImage.studyCode"
+        :body-part="previewImage.bodyPart" :modality="previewImage.modality" :study-id="previewImage.studyId"
+        :reading-task-state="readingTaskState" />
     </div>
     <div class="thumbnail-wrapper" style="z-index:999;background-color:#fff;">
       <div class="">
         <div class="img-wrapper">
-          <el-button
-            icon="el-icon-d-arrow-left"
-            plain
-            class="left to"
-            :disabled="disabledPrev"
-            @click="toRight"
-          />
+          <el-button icon="el-icon-d-arrow-left" plain class="left to" :disabled="disabledPrev" @click="toRight" />
           <div ref="imagesWrapper" class="images">
             <div v-if="noData" class="empty-text">
               <slot name="empty">{{ $t('trial:reading:noneDicoms:noData') }}</slot>
             </div>
             <div v-show="!noData" class="items" :style="itemsStyle">
-              <div
-                v-for="(item, index) in previewImage.imgList"
-                :key="index"
-                class="item-img"
-                :style="imgSize"
-                :class="{
-                  'is-active': index === currentIndex
-                }"
-                @click="selected(index)"
-              >
+              <div v-for="(item, index) in previewImage.imgList" :key="index" class="item-img" :style="imgSize" :class="{
+                'is-active': item.Id === currentFileId
+              }" @click="selected(item.Id)">
                 <img :title="item.FileName" :src="`${OSSclientConfig.basePath + item.Path}`" crossorigin="anonymous">
                 <p v-if="item.FileName" class="item-date">
-                  {{ `${index+1}` }}
+                  {{ `${index + 1}` }}
                 </p>
               </div>
             </div>
           </div>
-          <el-button
-            icon="el-icon-d-arrow-right"
-            :disabled="disabledNext"
-            plain
-            class="right to"
-            @click="Left"
-          />
+          <el-button icon="el-icon-d-arrow-right" :disabled="disabledNext" plain class="right to" @click="Left" />
         </div>
       </div>
     </div>
@@ -88,6 +60,10 @@ export default {
       type: Number,
       default: null
     },
+    currentFileId: {
+      type: String,
+      default: ''
+    },
     previewImage: {
       type: Object,
       default: () => {
@@ -161,9 +137,9 @@ export default {
     this.pageSize = this.wrapperWidth() / this.itemWidth
     this.urlList = this.previewImage
     const scope = this
-    window.onresize = function() {
+    window.onresize = function () {
       scope.pageSize = scope.wrapperWidth() / scope.itemWidth
-      scope.selected(scope.currentIndex)
+      scope.selected(scope.currentFileId)
     }
   },
   methods: {
@@ -181,7 +157,8 @@ export default {
         this.translateX = maxTrans
       }
     },
-    selected(index) {
+    selected(id) {
+      let index = this.previewImage.imgList.findIndex(item => item.Id === id)
       const center = this.pageSize >> 1
       // 最后一页的中间位置
       const lastCenter = this.dataLength - center
@@ -198,7 +175,7 @@ export default {
       if (this.currentIndex !== index) {
         this.currentIndex = index
       }
-      this.$emit('selectedImg', index)
+      this.$emit('selectedImg', id)
     },
     wrapperWidth() {
       if (this.$refs.imagesWrapper) {
@@ -212,35 +189,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.preview-wrapper{
+.preview-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-.image-viewer-wrapper{
+.image-viewer-wrapper {
   flex: 1;
 }
-.thumbnail-wrapper{
+
+.thumbnail-wrapper {
   height: 130px;
 }
-.img-content{
+
+.img-content {
   position: absolute;
   left: 0;
   bottom: 10px;
   width: 100%;
 }
+
 .img-wrapper {
   display: flex;
   position: relative;
   margin: 0 20px;
   height: 120px;
+
   .to {
     width: 32px;
     height: 100%;
     padding: 0;
   }
+
   .images::before {
     position: absolute;
     z-index: 5;
@@ -249,16 +231,15 @@ export default {
     width: 84px;
     content: '';
     pointer-events: none;
-    background: -webkit-gradient(
-      linear,
-      left top,
-      right top,
-      from(#fff),
-      color-stop(50%, rgba(0, 0, 0, 0))
-    );
+    background: -webkit-gradient(linear,
+        left top,
+        right top,
+        from(#fff),
+        color-stop(50%, rgba(0, 0, 0, 0)));
     background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%);
     background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%);
   }
+
   .images::after {
     position: absolute;
     z-index: 5;
@@ -268,22 +249,22 @@ export default {
     width: 84px;
     content: '';
     pointer-events: none;
-    background: -webkit-gradient(
-      linear,
-      right top,
-      left top,
-      from(#fff),
-      color-stop(50%, rgba(0, 0, 0, 0))
-    );
+    background: -webkit-gradient(linear,
+        right top,
+        left top,
+        from(#fff),
+        color-stop(50%, rgba(0, 0, 0, 0)));
     background: -o-linear-gradient(right, #fff, rgba(0, 0, 0, 0) 50%);
     background: linear-gradient(270deg, #fff, rgba(0, 0, 0, 0) 50%);
   }
+
   .images {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;
     margin: 0 2px;
+
     .empty-text {
       color: rgb(158, 158, 158);
       height: 100%;
@@ -291,6 +272,7 @@ export default {
       align-items: center;
       justify-content: center;
     }
+
     .items {
       position: absolute;
       top: 0;
@@ -300,6 +282,7 @@ export default {
       height: 100%;
       align-items: center;
       transition: transform 0.25s ease;
+
       .item-img {
         display: inline-block;
         box-sizing: border-box;
@@ -307,6 +290,7 @@ export default {
         margin-right: 8px;
         border: 2px solid rgba(0, 0, 0, 0);
         cursor: pointer;
+
         .item-date {
           bottom: 0px;
           position: absolute;
@@ -317,15 +301,18 @@ export default {
           line-height: 24px;
           color: white;
         }
+
         img {
           width: 100%;
           height: 100%;
         }
       }
+
       .item-img:hover::after {
         // border-color: #409EFF;
         opacity: 0;
       }
+
       .item-img::after {
         position: absolute;
         top: 0;
@@ -340,9 +327,11 @@ export default {
         transition: opacity 0.3s ease;
         background-color: #fff;
       }
+
       .is-active {
         border-color: #409eff;
       }
+
       .is-active:after {
         opacity: 0;
       }
diff --git a/src/views/trials/trials-panel/reading/dicoms/index.vue b/src/views/trials/trials-panel/reading/dicoms/index.vue
index 1c930608..c9782c62 100644
--- a/src/views/trials/trials-panel/reading/dicoms/index.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/index.vue
@@ -349,7 +349,7 @@ export default {
           this.dialogVisible = true
           this.cdVisitTaskId = this.visitTaskId
         }
-        if ((this.CriterionType === 19 || this.CriterionType === 20) && !this.IsViewStudyPart) {
+        if ((this.CriterionType === 19 || this.CriterionType === 20) && !this.IsViewStudyPart && this.readingCategory !== 4) {
           this.isFullscreen = false
           this.dialogBodyPartVisible = true
         }
diff --git a/src/views/trials/trials-panel/reading/dicoms/none-dicoms.vue b/src/views/trials/trials-panel/reading/dicoms/none-dicoms.vue
index a0273280..d971c2ca 100644
--- a/src/views/trials/trials-panel/reading/dicoms/none-dicoms.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/none-dicoms.vue
@@ -1,7 +1,12 @@
 <template>
   <div v-loading="loading" class="img-container">
     <el-card class="box-card left">
-      <div v-if="otherInfo && otherInfo.IsReadingShowSubjectInfo" class="title" style="text-align:center">
+      <div v-if="otherInfo && otherInfo.IsReadingShowSubjectInfo" class="title"
+        style="display: flex;align-items: center;flex-wrap: wrap;">
+        <div style="margin-right: 5px;cursor: pointer;display: inline-block" @click.stop="sortFile">
+          <i :class="['el-icon-caret-top', Asc ? '' : 'icon_check']" style="display: block;margin-bottom: -5px;"></i>
+          <i :class="['el-icon-caret-bottom', !Asc ? '' : 'icon_check']" style="display: block; margin-top: -5px;"></i>
+        </div>
         <span>{{ otherInfo.SubjectCode }} </span>
         <span>({{ otherInfo.TaskBlindName }})</span>
       </div>
@@ -40,8 +45,8 @@
     <el-card class="box-card right">
       <div style="width:100%;height: 100%;">
         <NoneDicomsViewer v-if="previewImage.imgList.length > 0" ref="previewImage" style="width:100%;"
-          :preview-image="previewImage" :value="currentStudyFileIndex" :reading-task-state="readingTaskState"
-          @selectedImg="selectedImg" />
+          :preview-image="previewImage" :value="currentStudyFileIndex" :currentFileId="currentFileId"
+          :reading-task-state="readingTaskState" @selectedImg="selectedImg" />
       </div>
 
     </el-card>
@@ -90,7 +95,8 @@ export default {
       visistTaskId: '',
       taskBlindName: '',
       readingTaskState: 2,
-      BodyPart: {}
+      BodyPart: {},
+      Asc: null
     }
   },
   async mounted() {
@@ -113,6 +119,25 @@ export default {
     this.getNoneDicomList()
   },
   methods: {
+    sortFile() {
+      if (this.Asc) {
+        this.Asc = false
+      } else {
+        this.Asc = true
+      }
+      this.studyList.forEach(study => {
+        if (study.NoneDicomStudyFileList.length > 0) {
+          if (this.Asc) {
+            study.NoneDicomStudyFileList.sort((a, b) => b.FileName.localeCompare(a.FileName))
+          } else {
+            study.NoneDicomStudyFileList.sort((a, b) => a.FileName.localeCompare(b.FileName))
+          }
+
+        }
+      })
+      this.previewImage.imgList = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList
+      this.previewImage.index = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === this.currentFileId)
+    },
     // 获取非Dicom检查信息
     getNoneDicomList() {
       this.loading = true
@@ -148,12 +173,14 @@ export default {
       this.previewImage.studyId = this.studyList[studyIndex].Id
       this.$nextTick(() => {
         if (isChangeSub) {
-          this.$refs['previewImage'].selected(fileIndex)
+          this.$refs['previewImage'].selected(this.currentFileId)
         }
       })
     },
-    selectedImg(fileIndex) {
+    selectedImg(id) {
       if (this.studyList.length > 0) {
+        let fileIndex = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === id)
+        console.log(fileIndex, id)
         this.currentStudyFileIndex = fileIndex
         this.currentFileId = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[fileIndex].Id
         this.previewImage.index = fileIndex
@@ -195,6 +222,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.icon_check {
+  color: #409EFF;
+}
+
 .img-container {
   flex: 1;
   width: 100%;
@@ -236,7 +267,7 @@ export default {
   }
 
   .title {
-    height: 40px;
+    // height: 40px; 
     line-height: 40px;
     border: 1ppx solid;
     border: 1px solid #ebe7e7;
diff --git a/src/views/trials/trials-panel/reading/none-dicoms/components/VisitReview.vue b/src/views/trials/trials-panel/reading/none-dicoms/components/VisitReview.vue
index 5146bfe9..1c08b481 100644
--- a/src/views/trials/trials-panel/reading/none-dicoms/components/VisitReview.vue
+++ b/src/views/trials/trials-panel/reading/none-dicoms/components/VisitReview.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="img-container">
     <el-card v-loading="loading" class="box-card left">
-      <div v-if="isReadingShowSubjectInfo" class="title">
+      <div v-if="isReadingShowSubjectInfo" class="title" style="display: flex;align-items: center;">
+        <div style="margin-right: 5px;cursor: pointer;" @click.stop="sortFile">
+          <i :class="['el-icon-caret-top', Asc ? '' : 'icon_check']" style="display: block;margin-bottom: -5px;"></i>
+          <i :class="['el-icon-caret-bottom', !Asc ? '' : 'icon_check']" style="display: block; margin-top: -5px;"></i>
+        </div>
         <h4>{{ subjectCode }} </h4>
         <h4>{{ taskBlindName }}</h4>
       </div>
@@ -179,7 +183,8 @@ export default {
       otherInfo: null,
       isReadingShowPreviousResults: false,
       BodyPart: {},
-      openWindow: null
+      openWindow: null,
+      Asc: null
     }
   },
   computed: {
@@ -190,7 +195,6 @@ export default {
   async mounted() {
     this.BodyPart.Bodypart = await this.$getBodyPart(this.$route.query.trialId)
     this.isReadingShowPreviousResults = this.$router.currentRoute.query.isReadingShowPreviousResults !== undefined ? this.$router.currentRoute.query.isReadingShowPreviousResults : true
-
     this.getNoneDicomList(this.isReadingShowPreviousResults)
   },
   beforeDestroy() {
@@ -199,6 +203,23 @@ export default {
     }
   },
   methods: {
+    sortFile() {
+      if (this.Asc) {
+        this.Asc = false
+      } else {
+        this.Asc = true
+      }
+      this.studyList.forEach(study => {
+        if (study.NoneDicomStudyFileList.length > 0) {
+          if (this.Asc) {
+            study.NoneDicomStudyFileList.sort((a, b) => b.FileName.localeCompare(a.FileName))
+          } else {
+            study.NoneDicomStudyFileList.sort((a, b) => a.FileName.localeCompare(b.FileName))
+          }
+
+        }
+      })
+    },
     // 获取非Dicom检查信息
     getNoneDicomList() {
       this.loading = true
@@ -327,6 +348,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.icon_check {
+  color: #409EFF;
+}
+
 .img-container {
   flex: 1;
   width: 100%;