lugano标准病灶列表添加既往标记截图预览
parent
a298048ed0
commit
0cca8f71b4
|
|
@ -1,82 +1,322 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="history_screenshot">
|
<div class="image_preview-wrapper">
|
||||||
<h3 class="info">
|
|
||||||
<span>{{ subjectCode }}</span>
|
<div class="image-viewer-wrapper">
|
||||||
<span style="margin-left:10px;">{{ title }}</span>
|
<!-- 预览图像 -->
|
||||||
</h3>
|
<ImageViewer
|
||||||
<template v-if="historyInfo">
|
v-if="previewVisible"
|
||||||
<el-timeline v-viewer>
|
:on-switch="
|
||||||
<el-timeline-item
|
(index) => {
|
||||||
v-for="i in historyInfo"
|
selected(index)
|
||||||
:key="i.VisitTaskId"
|
}
|
||||||
:timestamp="i.TaskBlindName"
|
"
|
||||||
placement="top"
|
:initial-index="currentIndex"
|
||||||
>
|
:url-list="previewImages"
|
||||||
<el-card shadow="never">
|
/>
|
||||||
<img
|
</div>
|
||||||
crossorigin="anonymous"
|
<div class="thumbnail-wrapper" style="z-index:999;background-color:#fff;">
|
||||||
:src="i.OtherPicturePath"
|
<div class="">
|
||||||
alt="Image"
|
<div class="img-wrapper">
|
||||||
>
|
<el-button
|
||||||
</el-card>
|
icon="el-icon-d-arrow-left"
|
||||||
</el-timeline-item>
|
plain
|
||||||
</el-timeline>
|
class="left to"
|
||||||
</template>
|
: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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getPreviousOtherPicturePath } from '@/api/trials'
|
import { getPreviousOtherPicturePath } from '@/api/trials'
|
||||||
import { changeURLStatic } from '@/utils/history.js'
|
import { changeURLStatic } from '@/utils/history.js'
|
||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
import Viewer from 'v-viewer'
|
import ImageViewer from './ImageViewer'
|
||||||
export default {
|
export default {
|
||||||
name: 'HistoryScreenshot',
|
name: 'Preview',
|
||||||
|
components: {
|
||||||
|
ImageViewer
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
subjectCode: '',
|
currentIndex: 0,
|
||||||
title: '',
|
previewVisible: true,
|
||||||
lesionId: '',
|
translateX: 0,
|
||||||
historyInfo: null
|
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() {
|
mounted() {
|
||||||
if (this.$router.currentRoute.query.TokenKey) {
|
if (this.$router.currentRoute.query.TokenKey) {
|
||||||
store.dispatch('user/setToken', this.$route.query.TokenKey)
|
store.dispatch('user/setToken', this.$route.query.TokenKey)
|
||||||
changeURLStatic('TokenKey', '')
|
changeURLStatic('TokenKey', '')
|
||||||
}
|
}
|
||||||
this.lesionId = this.$route.query.rowId
|
this.lesionId = this.$route.query.rowId
|
||||||
this.subjectCode = this.$route.query.subjectCode
|
this.initPage()
|
||||||
this.title = this.$route.query.lesionName
|
|
||||||
if (!this.lesionId) return
|
|
||||||
this.initializeViewer()
|
|
||||||
this.getScreenshot()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getScreenshot() {
|
async initPage() {
|
||||||
const loading = this.$loading({ fullscreen: true })
|
await this.getScreenshot()
|
||||||
getPreviousOtherPicturePath({ rowId: this.lesionId }).then(res => {
|
this.pageSize = this.wrapperWidth() / this.itemWidth
|
||||||
this.historyInfo = res.Result
|
const scope = this
|
||||||
loading.close()
|
window.onresize = function() {
|
||||||
}).catch(() => { loading.close() })
|
scope.pageSize = scope.wrapperWidth() / scope.itemWidth
|
||||||
|
scope.selected(scope.currentIndex)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
initializeViewer() {
|
getScreenshot() {
|
||||||
Viewer.setDefaults({
|
return new Promise(resolve => {
|
||||||
toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true, prev: true, next: true }
|
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>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.history_screenshot{
|
<style lang="scss">
|
||||||
padding: 20px 100px 20px 20px;
|
.image_preview-wrapper{
|
||||||
.info{
|
width: 100%;
|
||||||
margin-left: 35px;
|
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{
|
.images::before {
|
||||||
width: 100px;
|
position: absolute;
|
||||||
height: 100px;
|
z-index: 5;
|
||||||
cursor: pointer;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -80,7 +80,7 @@ export default {
|
||||||
criterionType: null,
|
criterionType: null,
|
||||||
spleenInfo: null,
|
spleenInfo: null,
|
||||||
calculateSpleenStatus: '',
|
calculateSpleenStatus: '',
|
||||||
formChanged:false
|
formChanged: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue