From 0cca8f71b43d0d694a84e6f3c0f08aa428590dbb Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Mon, 18 Mar 2024 13:55:56 +0800
Subject: [PATCH] =?UTF-8?q?lugano=E6=A0=87=E5=87=86=E7=97=85=E7=81=B6?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0=E6=97=A2=E5=BE=80=E6=A0=87?=
 =?UTF-8?q?=E8=AE=B0=E6=88=AA=E5=9B=BE=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Fusion/HistoryScreenshot.vue   | 344 ++++++++++++--
 .../dicoms/components/Fusion/ImageViewer.vue  | 446 ++++++++++++++++++
 .../reading/dicoms/components/Questions.vue   |   2 +-
 3 files changed, 739 insertions(+), 53 deletions(-)
 create mode 100644 src/views/trials/trials-panel/reading/dicoms/components/Fusion/ImageViewer.vue

diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/HistoryScreenshot.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/HistoryScreenshot.vue
index 16a21dbb..f1189507 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/HistoryScreenshot.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/HistoryScreenshot.vue
@@ -1,82 +1,322 @@
 <template>
-  <div class="history_screenshot">
-    <h3 class="info">
-      <span>{{ subjectCode }}</span>
-      <span style="margin-left:10px;">{{ title }}</span>
-    </h3>
-    <template v-if="historyInfo">
-      <el-timeline v-viewer>
-        <el-timeline-item
-          v-for="i in historyInfo"
-          :key="i.VisitTaskId"
-          :timestamp="i.TaskBlindName"
-          placement="top"
-        >
-          <el-card shadow="never">
-            <img
-              crossorigin="anonymous"
-              :src="i.OtherPicturePath"
-              alt="Image"
-            >
-          </el-card>
-        </el-timeline-item>
-      </el-timeline>
-    </template>
+  <div class="image_preview-wrapper">
+
+    <div class="image-viewer-wrapper">
+      <!-- 预览图像 -->
+      <ImageViewer
+        v-if="previewVisible"
+        :on-switch="
+          (index) => {
+            selected(index)
+          }
+        "
+        :initial-index="currentIndex"
+        :url-list="previewImages"
+      />
+    </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"
+          />
+          <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">
+              <div
+                v-for="(item, index) in previewImages"
+                :key="index"
+                class="item-img"
+                :style="imgSize"
+                :class="{
+                  'is-active': index === currentIndex
+                }"
+                @click="selected(index)"
+              >
+                <img crossorigin="anonymous" :src="`${item.PicturePath}`">
+                <p class="item-date">
+                  {{ `${item.TaskBlindName}` }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <el-button
+            icon="el-icon-d-arrow-right"
+            :disabled="disabledNext"
+            plain
+            class="right to"
+            @click="Left"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { getPreviousOtherPicturePath } from '@/api/trials'
 import { changeURLStatic } from '@/utils/history.js'
 import store from '@/store'
-import Viewer from 'v-viewer'
+import ImageViewer from './ImageViewer'
 export default {
-  name: 'HistoryScreenshot',
+  name: 'Preview',
+  components: {
+    ImageViewer
+  },
   data() {
     return {
-      subjectCode: '',
-      title: '',
-      lesionId: '',
-      historyInfo: null
+      currentIndex: 0,
+      previewVisible: true,
+      translateX: 0,
+      pageSize: 0, // 一页展示的图片数
+      previewImages: [],
+      imgSize: { width: '120px', height: '120px' }
     }
   },
+  computed: {
+    // 偏移度数
+    itemsStyle() {
+      return {
+        transform: `translateX(${-this.translateX}px)`
+      }
+    },
+    // 每一项宽度
+    itemWidth() {
+      return parseInt(this.imgSize.width.replace('px', '')) + 8
+    },
+    disabledPrev() {
+      // 禁用前一页按钮
+      return this.translateX <= 0
+    },
+    disabledNext() {
+      // 禁用后一页按钮
+      return (
+        this.translateX >= (this.previewImages.length - this.pageSize) * this.itemWidth
+      )
+    },
+    noData() {
+      return this.previewImages.length === 0
+    },
+    dataLength() {
+      return this.previewImages.length
+    }
+
+  },
   mounted() {
     if (this.$router.currentRoute.query.TokenKey) {
       store.dispatch('user/setToken', this.$route.query.TokenKey)
       changeURLStatic('TokenKey', '')
     }
     this.lesionId = this.$route.query.rowId
-    this.subjectCode = this.$route.query.subjectCode
-    this.title = this.$route.query.lesionName
-    if (!this.lesionId) return
-    this.initializeViewer()
-    this.getScreenshot()
+    this.initPage()
   },
   methods: {
-    getScreenshot() {
-      const loading = this.$loading({ fullscreen: true })
-      getPreviousOtherPicturePath({ rowId: this.lesionId }).then(res => {
-        this.historyInfo = res.Result
-        loading.close()
-      }).catch(() => { loading.close() })
+    async initPage() {
+      await this.getScreenshot()
+      this.pageSize = this.wrapperWidth() / this.itemWidth
+      const scope = this
+      window.onresize = function() {
+        scope.pageSize = scope.wrapperWidth() / scope.itemWidth
+        scope.selected(scope.currentIndex)
+      }
     },
-    initializeViewer() {
-      Viewer.setDefaults({
-        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true, prev: true, next: true }
+    getScreenshot() {
+      return new Promise(resolve => {
+        const loading = this.$loading({ fullscreen: true })
+        getPreviousOtherPicturePath({ rowId: this.lesionId }).then(res => {
+          this.previewImages = res.Result
+          loading.close()
+          resolve()
+        }).catch(() => {
+          loading.close()
+          resolve()
+        })
       })
+    },
+    toRight() {
+      if (this.translateX < this.pageSize * this.itemWidth) {
+        this.translateX = 0
+      } else {
+        this.translateX = this.translateX - this.pageSize * this.itemWidth
+      }
+    },
+    Left() {
+      this.translateX = this.translateX + this.pageSize * this.itemWidth
+      const maxTrans = this.itemWidth * (this.dataLength - this.pageSize)
+      if (this.translateX > maxTrans) {
+        this.translateX = maxTrans
+      }
+    },
+    selected(index) {
+      const center = this.pageSize >> 1
+      // 最后一页的中间位置
+      const lastCenter = this.dataLength - center
+
+      if (index > center && index < lastCenter) {
+        // 与相册中间相差的图片数量
+        const step = index - center
+        // 将点击图片移动到中间
+        this.translateX = this.itemWidth * step
+      } else {
+        const maxTrans = this.itemWidth * (this.dataLength - this.pageSize)
+        this.translateX = index <= center ? 0 : maxTrans
+      }
+      if (this.currentIndex !== index) {
+        this.currentIndex = index
+      }
+    },
+    wrapperWidth() {
+      if (this.$refs.imagesWrapper) {
+        return this.$refs.imagesWrapper.offsetWidth
+      }
+      return 0
     }
+
   }
 }
 </script>
-<style lang="scss" scoped>
-.history_screenshot{
-  padding: 20px 100px 20px 20px;
-  .info{
-    margin-left: 35px;
+
+<style lang="scss">
+.image_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;
   }
-  img{
-    width: 100px;
-    height: 100px;
-    cursor: pointer;
+  .images::before {
+    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;
+    width: 100%;
+    height: 100%;
+    margin: 0 2px;
+    .empty-text {
+      color: rgb(158, 158, 158);
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .items {
+      position: absolute;
+      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%;
+        }
+      }
+      .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/trials/trials-panel/reading/dicoms/components/Fusion/ImageViewer.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/ImageViewer.vue
new file mode 100644
index 00000000..d0028c49
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/ImageViewer.vue
@@ -0,0 +1,446 @@
+/* eslint-disable no-unused-vars */
+<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 }">
+        <span v-if="urlList[index]" class="image-viewer_desc">
+          {{ `${urlList[index].TaskBlindName}` }}
+        </span>
+        <!-- 关闭 -->
+        <span class="image-viewer__btn image-viewer__close" @click="hide">
+          <i class="el-icon-close" />
+        </span>
+        <!-- Arrow -->
+        <template v-if="!isSingle">
+          <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"
+          >
+            <i class="el-icon-arrow-right" />
+          </span>
+        </template>
+        <!-- 工具栏 -->
+        <div class="image-viewer__btn image-viewer__actions">
+          <div class="image-viewer__actions__inner">
+            <i class="el-icon-zoom-out" @click="handleActions('zoomOut')" />
+            <i class="el-icon-zoom-in" @click="handleActions('zoomIn')" />
+            <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')" />
+          </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.VisitTaskId"
+            crossorigin="anonymous"
+            :src="`${item.PicturePath}`"
+            :style="imgStyle"
+            style="max-width:100%;max-height: 100%;"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown"
+          >
+
+        </div>
+      </div>
+    </transition>
+
+  </div>
+
+</template>
+
+<script>
+import { on, off } from 'element-ui/src/utils/dom'
+import { rafThrottle, isFirefox } from 'element-ui/src/utils/util'
+
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
+
+export default {
+  name: 'ImageViewer',
+  props: {
+    urlList: {
+      type: Array,
+      default: () => []
+    },
+    onSwitch: {
+      type: Function,
+      default: () => {}
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    }
+  },
+  computed: {
+    isSingle() {
+      return this.urlList.length <= 1
+    },
+    isFirst() {
+      return this.index === 0
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1
+    },
+
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? 'transform .3s' : '',
+        'margin-left': `${offsetX}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) => {
+      if (event.deltaY > 0) {
+        // 缩小
+        this.handleActions('zoomOut', {
+          zoomRate: 0.015,
+          enableTransition: false
+        })
+      } else {
+        // 放大
+        this.handleActions('zoomIn', {
+          zoomRate: 0.015,
+          enableTransition: false
+        })
+      }
+      return false
+    }
+    this.deviceSupportInstall()
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall()
+      this.onClose()
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = e => {
+        e.stopPropagation()
+        const keyCode = e.keyCode
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide()
+            break
+          // SPACE
+          case 32:
+            this.toggleMode()
+            break
+          // LEFT_ARROW
+          case 37:
+            this.prev()
+            break
+          // UP_ARROW
+          case 38:
+            this.handleActions('zoomIn')
+            break
+          // RIGHT_ARROW
+          case 39:
+            this.next()
+            break
+          // DOWN_ARROW
+          case 40:
+            this.handleActions('zoomOut')
+            break
+        }
+      }
+      this._mouseWheelHandler = rafThrottle(e => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail
+        if (delta > 0) {
+          this.handleActions('zoomIn', {
+            zoomRate: 0.015,
+            enableTransition: false
+          })
+        } else {
+          this.handleActions('zoomOut', {
+            zoomRate: 0.015,
+            enableTransition: false
+          })
+        }
+      })
+      on(document, 'keydown', this._keyDownHandler)
+
+      on(document, mousewheelEventName, null)
+      // on(document, mousewheelEventName, this._mouseWheelHandler)
+    },
+    deviceSupportUninstall() {
+      off(document, 'keydown', this._keyDownHandler)
+      off(document, mousewheelEventName, this._mouseWheelHandler)
+      this._keyDownHandler = null
+      this._mouseWheelHandler = null
+    },
+    handleImgLoad(e) {
+      this.loading = false
+    },
+    handleImgError(e) {
+      this.loading = false
+      e.target.alt = '加载失败'
+    },
+    handleMouseDown(e) {
+      if (this.loading || e.button !== 0) return
+
+      const { offsetX, offsetY } = this.transform
+      const startX = e.pageX
+      const startY = e.pageY
+      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 => {
+        off(document, 'mousemove', this._dragHandler)
+      })
+
+      e.preventDefault()
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    },
+    toggleMode() {
+      if (this.loading) return
+      this.reset()
+    },
+    prev() {
+      if (this.isFirst && !this.infinite) return
+      const len = this.urlList.length
+      this.index = (this.index - 1 + len) % len
+    },
+    next() {
+      if (this.isLast && !this.infinite) return
+      const len = this.urlList.length
+      this.index = (this.index + 1) % len
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      }
+      const { transform } = this
+      switch (action) {
+        case 'zoomOut':
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
+          }
+          break
+        case 'zoomIn':
+          if (transform.scale < 5) {
+            transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
+          }
+          break
+        case 'clocelise':
+          transform.deg += rotateDeg
+          break
+        case 'anticlocelise':
+          transform.deg -= rotateDeg
+          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__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
+}
+.image-viewer_desc{
+  position:absolute;
+  top:20px;
+  left:40px;
+  font-size:20px;
+  padding: 5px;
+  height: 30px;
+  // width: 70px;
+  line-height: 20px;
+  text-align: center;
+  color: #606266;
+  font-weight: bold;
+  // color: #fff;
+  // background-color: #606266;
+  // border-color: #fff;
+  z-index: 1;
+  // border-radius: 5%;
+  // border-radius: 2%;
+}
+.image-viewer__canvas{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width:100%;
+    height:85%;
+    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;
+    i{
+      cursor: pointer;
+    }
+}
+.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/Questions.vue b/src/views/trials/trials-panel/reading/dicoms/components/Questions.vue
index e741d938..cdf2ebad 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/Questions.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Questions.vue
@@ -80,7 +80,7 @@ export default {
       criterionType: null,
       spleenInfo: null,
       calculateSpleenStatus: '',
-      formChanged:false
+      formChanged: false
     }
   },
   computed: {