From 35bff089b7027694bccaad6f3bcfdd6af19ad47e Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Thu, 27 Feb 2025 18:01:38 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=9Edicom=E9=A2=84=E8=A7=88=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=A1=BA=E5=BA=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/image-viewer.vue               | 336 +++++++++---------
 .../none-dicom-show/components/preview.vue    | 317 +++++++++--------
 src/views/none-dicom-show/index.vue           |   8 +-
 3 files changed, 343 insertions(+), 318 deletions(-)

diff --git a/src/views/none-dicom-show/components/image-viewer.vue b/src/views/none-dicom-show/components/image-viewer.vue
index a9718f07..92ec89b6 100644
--- a/src/views/none-dicom-show/components/image-viewer.vue
+++ b/src/views/none-dicom-show/components/image-viewer.vue
@@ -1,13 +1,19 @@
 /* eslint-disable no-unused-vars */
 <template>
-  <div style="width:100%;height:100%;">
+  <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>
           <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">
@@ -38,37 +44,46 @@
             <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">
-          <img
-            v-for="(item, i) in urlList"
-            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 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"
+            />
+          </template>
         </div>
       </div>
     </transition>
-
   </div>
-
 </template>
 
 <script>
 import { on, off } from 'element-ui/src/utils/dom'
-import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+import { rafThrottle, isFirefox } from 'element-ui/src/utils/util'
 
 const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
 
@@ -77,36 +92,36 @@ export default {
   props: {
     urlList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     studyCode: {
       type: String,
-      default: ''
+      default: '',
     },
     bodyPart: {
       type: String,
-      default: ''
+      default: '',
     },
     modality: {
       type: String,
-      default: ''
+      default: '',
     },
     onSwitch: {
       type: Function,
-      default: () => {}
+      default: () => {},
     },
     onClose: {
       type: Function,
-      default: () => {}
+      default: () => {},
     },
     initialIndex: {
       type: Number,
-      default: 0
+      default: 0,
+    },
+    zipImg: {
+      required: true,
+      default: '',
     },
-    zipImg:{
-      required:true,
-      default:''
-    }
   },
 
   data() {
@@ -120,7 +135,7 @@ export default {
         deg: 0,
         offsetX: 0,
         offsetY: 0,
-        enableTransition: false
+        enableTransition: false,
       },
     }
   },
@@ -141,25 +156,25 @@ export default {
         transform: `scale(${scale}) rotate(${deg}deg)`,
         transition: enableTransition ? 'transform .3s' : '',
         'margin-left': `${offsetX}px`,
-        'margin-top': `${offsetY}px`
+        'margin-top': `${offsetY}px`,
       }
       return style
-    }
+    },
   },
   watch: {
     initialIndex: {
       immediate: true,
       handler(val) {
         this.index = val
-      }
+      },
     },
     index: {
       immediate: true,
       handler(val) {
         this.reset()
         this.onSwitch(val)
-      }
-    }
+      },
+    },
   },
   mounted() {
     document.getElementById('image-viewer__canvas').onmousewheel = (event) => {
@@ -167,13 +182,13 @@ export default {
         // 缩小
         this.handleActions('zoomOut', {
           zoomRate: 0.015,
-          enableTransition: false
+          enableTransition: false,
         })
       } else {
         // 放大
         this.handleActions('zoomIn', {
           zoomRate: 0.015,
-          enableTransition: false
+          enableTransition: false,
         })
       }
       return false
@@ -186,7 +201,7 @@ export default {
       this.onClose()
     },
     deviceSupportInstall() {
-      this._keyDownHandler = e => {
+      this._keyDownHandler = (e) => {
         e.stopPropagation()
         const keyCode = e.keyCode
         switch (keyCode) {
@@ -216,17 +231,17 @@ export default {
             break
         }
       }
-      this._mouseWheelHandler = rafThrottle(e => {
+      this._mouseWheelHandler = rafThrottle((e) => {
         const delta = e.wheelDelta ? e.wheelDelta : -e.detail
         if (delta > 0) {
           this.handleActions('zoomIn', {
             zoomRate: 0.015,
-            enableTransition: false
+            enableTransition: false,
           })
         } else {
           this.handleActions('zoomOut', {
             zoomRate: 0.015,
-            enableTransition: false
+            enableTransition: false,
           })
         }
       })
@@ -254,12 +269,12 @@ export default {
       const { offsetX, offsetY } = this.transform
       const startX = e.pageX
       const startY = e.pageY
-      this._dragHandler = rafThrottle(ev => {
+      this._dragHandler = rafThrottle((ev) => {
         this.transform.offsetX = offsetX + ev.pageX - startX
         this.transform.offsetY = offsetY + ev.pageY - startY
       })
       on(document, 'mousemove', this._dragHandler)
-      on(document, 'mouseup', ev => {
+      on(document, 'mouseup', (ev) => {
         off(document, 'mousemove', this._dragHandler)
       })
 
@@ -271,7 +286,7 @@ export default {
         deg: 0,
         offsetX: 0,
         offsetY: 0,
-        enableTransition: false
+        enableTransition: false,
       }
     },
     toggleMode() {
@@ -294,18 +309,22 @@ export default {
         zoomRate: 0.2,
         rotateDeg: 90,
         enableTransition: true,
-        ...options
+        ...options,
       }
       const { transform } = this
       switch (action) {
         case 'zoomOut':
           if (transform.scale > 0.2) {
-            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
+            transform.scale = parseFloat(
+              (transform.scale - zoomRate).toFixed(3)
+            )
           }
           break
         case 'zoomIn':
           if (transform.scale < 5) {
-            transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
+            transform.scale = parseFloat(
+              (transform.scale + zoomRate).toFixed(3)
+            )
           }
           break
         case 'clocelise':
@@ -316,47 +335,46 @@ export default {
           break
       }
       transform.enableTransition = enableTransition
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
-
-.image-viewer__wrapper{
-    position: relative;
-    top:0;
-    right:0;
-    bottom:0;
-    left:0;
-    width: 100%;
-    height: 100%;
+.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__btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  opacity: 0.8;
+  cursor: pointer;
+  box-sizing: border-box;
+  user-select: none;
 }
 
-.image-viewer__close{
+.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;
@@ -369,92 +387,92 @@ 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__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 {
+  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__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__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__prev {
+  transform: translateY(-50%);
+  left: 40px;
 }
-.image-viewer__next{
-    transform:translateY(-50%);
-    right:40px;
-    text-indent:2px
+.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
-
+.image-viewer__mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0.5;
+  // background:#000
 }
-.viewer-fade-enter-active{
-    animation:viewer-fade-in .3s
+.viewer-fade-enter-active {
+  animation: viewer-fade-in 0.3s;
 }
-.viewer-fade-leave-active{
-    animation:viewer-fade-out .3s
+.viewer-fade-leave-active {
+  animation: viewer-fade-out 0.3s;
 }
 
-@keyframes viewer-fade-in{
-    0%{
-        transform:translate3d(0,-20px,0);
-        opacity:0
-    }
-    100%{
-        transform:translate3d(0,0,0);
-        opacity:1
-    }
+@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
-    }
+@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/none-dicom-show/components/preview.vue b/src/views/none-dicom-show/components/preview.vue
index 327c2279..7eedf98e 100644
--- a/src/views/none-dicom-show/components/preview.vue
+++ b/src/views/none-dicom-show/components/preview.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="none-dicom_preview-wrapper">
-
     <div class="image-viewer-wrapper">
       <!-- 预览图像 -->
       <ImageViewer
@@ -15,10 +14,10 @@
         :study-code="previewImage.studyCode"
         :body-part="previewImage.bodyPart"
         :modality="previewImage.modality"
-        :zip-img='zipImg'
+        :zip-img="zipImg"
       />
     </div>
-    <div class="thumbnail-wrapper" style="z-index:999;background-color:#fff;">
+    <div class="thumbnail-wrapper" style="z-index: 999; background-color: #fff">
       <div class="">
         <div class="img-wrapper">
           <el-button
@@ -33,21 +32,31 @@
               <slot name="empty">暂无数据</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)"
-              >
-                <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>
-              </div>
+              <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}`
+                    "
+                  />
+                  <p v-if="item.FileName" class="item-date">
+                    {{ `${index + 1}` }}
+                  </p>
+                </div>
+              </template>
             </div>
           </div>
           <el-button
@@ -63,12 +72,12 @@
   </div>
 </template>
 <script>
-import ImageViewer from './image-viewer';
-import zipImg from "@/assets/zip.png";
+import ImageViewer from './image-viewer'
+import zipImg from '@/assets/zip.png'
 export default {
   name: 'Preview',
   components: {
-    ImageViewer
+    ImageViewer,
   },
   props: {
     imgSize: {
@@ -76,13 +85,13 @@ export default {
       default: () => {
         return {
           width: '120px',
-          height: '120px'
+          height: '120px',
         }
-      }
+      },
     },
     value: {
       type: Number,
-      default: null
+      default: null,
     },
     previewImage: {
       type: Object,
@@ -94,11 +103,10 @@ export default {
           infinite: true, // 是否可以循环切换
           studyCode: '',
           modality: '',
-          bodyPart: ''
+          bodyPart: '',
         }
-      }
-    }
-
+      },
+    },
   },
   data() {
     return {
@@ -107,14 +115,14 @@ export default {
       translateX: 0,
       pageSize: 0, // 一页展示的图片数
       urlList: [],
-      zipImg
+      zipImg,
     }
   },
   computed: {
     // 偏移度数
     itemsStyle() {
       return {
-        transform: `translateX(${-this.translateX}px)`
+        transform: `translateX(${-this.translateX}px)`,
       }
     },
     // 每一项宽度
@@ -128,7 +136,8 @@ export default {
     disabledNext() {
       // 禁用后一页按钮
       return (
-        this.translateX >= (this.previewImage.imgList.length - this.pageSize) * this.itemWidth
+        this.translateX >=
+        (this.previewImage.imgList.length - this.pageSize) * this.itemWidth
       )
     },
     noData() {
@@ -136,28 +145,27 @@ export default {
     },
     dataLength() {
       return this.previewImage.imgList.length
-    }
-
+    },
   },
   watch: {
     value: {
       immediate: true,
       handler(val) {
         this.currentIndex = val
-      }
+      },
     },
     'previewImage.index': {
       immediate: true,
       handler(val) {
         this.urlList.index = val
-      }
-    }
+      },
+    },
   },
   mounted() {
     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)
     }
@@ -201,148 +209,147 @@ export default {
         return this.$refs.imagesWrapper.offsetWidth
       }
       return 0
-    }
-
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss">
-.none-dicom_preview-wrapper{
+.none-dicom_preview-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 
-.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;
+  .image-viewer-wrapper {
+    flex: 1;
   }
-  .images::before {
+  .thumbnail-wrapper {
+    height: 130px;
+  }
+  .img-content {
     position: absolute;
-    z-index: 5;
-    top: 0;
-    height: 100%;
-    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: -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;
-    top: 0;
-    height: 100%;
-    right: 0;
-    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: -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;
+    left: 0;
+    bottom: 10px;
     width: 100%;
-    height: 100%;
-    margin: 0 2px;
-    .empty-text {
-      color: rgb(158, 158, 158);
+  }
+  .img-wrapper {
+    display: flex;
+    position: relative;
+    margin: 0 20px;
+    height: 120px;
+    .to {
+      width: 32px;
       height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      padding: 0;
     }
-    .items {
+    .images::before {
       position: absolute;
+      z-index: 5;
       top: 0;
-      left: 0;
-      display: flex;
-      // width: 6000px;
       height: 100%;
-      align-items: center;
-      transition: transform 0.25s ease;
-      .item-img {
-        display: inline-block;
-        box-sizing: border-box;
-        position: relative;
-        margin-right: 8px;
-        border: 2px solid rgba(0, 0, 0, 0);
-        cursor: pointer;
-        .item-date {
-          bottom: 0px;
-          position: absolute;
-          width: 100%;
-          height: 24px;
-          background: rgba(0, 0, 0, 0.2);
-          text-align: center;
-          line-height: 24px;
-          color: white;
-        }
-        img {
-          width: 100%;
-          height: 100%;
-        }
+      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: -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;
+      top: 0;
+      height: 100%;
+      right: 0;
+      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: -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%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
-      .item-img:hover::after {
-        // border-color: #409EFF;
-        opacity: 0;
-      }
-      .item-img::after {
+      .items {
         position: absolute;
         top: 0;
         left: 0;
-        width: 100%;
+        display: flex;
+        // width: 6000px;
         height: 100%;
-        content: '';
-        opacity: 0.2;
-        pointer-events: none;
-        -webkit-transition: opacity 0.3s ease;
-        -o-transition: opacity 0.3s ease;
-        transition: opacity 0.3s ease;
-        background-color: #fff;
-      }
-      .is-active {
-        border-color: #409eff;
-      }
-      .is-active:after {
-        opacity: 0;
+        align-items: center;
+        transition: transform 0.25s ease;
+        .item-img {
+          display: inline-block;
+          box-sizing: border-box;
+          position: relative;
+          margin-right: 8px;
+          border: 2px solid rgba(0, 0, 0, 0);
+          cursor: pointer;
+          .item-date {
+            bottom: 0px;
+            position: absolute;
+            width: 100%;
+            height: 24px;
+            background: rgba(0, 0, 0, 0.2);
+            text-align: center;
+            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;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          content: '';
+          opacity: 0.2;
+          pointer-events: none;
+          -webkit-transition: opacity 0.3s ease;
+          -o-transition: opacity 0.3s ease;
+          transition: opacity 0.3s ease;
+          background-color: #fff;
+        }
+        .is-active {
+          border-color: #409eff;
+        }
+        .is-active:after {
+          opacity: 0;
+        }
       }
     }
   }
 }
-}
 </style>
diff --git a/src/views/none-dicom-show/index.vue b/src/views/none-dicom-show/index.vue
index 375e8232..08d029a4 100644
--- a/src/views/none-dicom-show/index.vue
+++ b/src/views/none-dicom-show/index.vue
@@ -177,6 +177,7 @@ export default {
         })
     },
     selected(file, studyIndex, fileIndex, isChangeSub = false) {
+      this.currentFileId = file.Id
       if (!!~file.FileType.indexOf('pdf')) {
         this.pdfFile.path = file.Path || file.FullFilePath
         this.pdfFile.type = 'pdf'
@@ -185,11 +186,10 @@ export default {
       } else {
         this.showPDF = false
       }
-      this.currentFileId = file.Id
+
       this.currentStudyIndex = studyIndex
-      this.previewImage.imgList = this.studyList[
-        studyIndex
-      ].NoneDicomStudyFileList.filter((item) => !~item.FileType.indexOf('pdf'))
+      this.previewImage.imgList =
+        this.studyList[studyIndex].NoneDicomStudyFileList
       this.currentStudyFileIndex = fileIndex
       this.previewImage.index = fileIndex
       this.previewImage.studyCode = this.studyList[studyIndex].CodeView