非dicom预览显示顺序问题
continuous-integration/drone/push Build encountered an error
Details
continuous-integration/drone/push Build encountered an error
Details
parent
6b1f8c26b2
commit
35bff089b7
|
|
@ -1,8 +1,14 @@
|
|||
/* 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>
|
||||
|
|
@ -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">
|
||||
<template v-for="(item, i) in urlList">
|
||||
<img
|
||||
v-for="(item, i) in urlList"
|
||||
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}`"
|
||||
:src="
|
||||
item.FileType && item.FileType.indexOf('zip') >= 0
|
||||
? zipImg
|
||||
: `${OSSclientConfig.basePath}${item.Path}`
|
||||
"
|
||||
:style="imgStyle"
|
||||
style="max-width:100%;max-height: 100%;"
|
||||
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:''
|
||||
}
|
||||
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,12 +335,11 @@ export default {
|
|||
break
|
||||
}
|
||||
transform.enableTransition = enableTransition
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.image-viewer__wrapper {
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
|
@ -338,10 +356,10 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
opacity:.8;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
user-select:none
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.image-viewer__close {
|
||||
|
|
@ -350,7 +368,7 @@ export default {
|
|||
right: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size:40px
|
||||
font-size: 40px;
|
||||
}
|
||||
.image-viewer_desc {
|
||||
position: absolute;
|
||||
|
|
@ -377,7 +395,7 @@ export default {
|
|||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items:center
|
||||
align-items: center;
|
||||
}
|
||||
.image-viewer__actions {
|
||||
left: 50%;
|
||||
|
|
@ -388,7 +406,7 @@ export default {
|
|||
padding: 0 23px;
|
||||
background-color: #606266;
|
||||
border-color: #fff;
|
||||
border-radius:22px
|
||||
border-radius: 22px;
|
||||
}
|
||||
.image-viewer__actions__inner {
|
||||
width: 100%;
|
||||
|
|
@ -399,25 +417,26 @@ export default {
|
|||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:space-around
|
||||
justify-content: space-around;
|
||||
}
|
||||
.image-viewer__next,.image-viewer__prev{
|
||||
.image-viewer__next,
|
||||
.image-viewer__prev {
|
||||
top: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background-color: #606266;
|
||||
border-color:#fff
|
||||
border-color: #fff;
|
||||
}
|
||||
.image-viewer__prev {
|
||||
transform: translateY(-50%);
|
||||
left:40px
|
||||
left: 40px;
|
||||
}
|
||||
.image-viewer__next {
|
||||
transform: translateY(-50%);
|
||||
right: 40px;
|
||||
text-indent:2px
|
||||
text-indent: 2px;
|
||||
}
|
||||
.image-viewer__mask {
|
||||
position: absolute;
|
||||
|
|
@ -425,36 +444,35 @@ export default {
|
|||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity:.5;
|
||||
opacity: 0.5;
|
||||
// background:#000
|
||||
|
||||
}
|
||||
.viewer-fade-enter-active {
|
||||
animation:viewer-fade-in .3s
|
||||
animation: viewer-fade-in 0.3s;
|
||||
}
|
||||
.viewer-fade-leave-active {
|
||||
animation:viewer-fade-out .3s
|
||||
animation: viewer-fade-out 0.3s;
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-in {
|
||||
0% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity:0
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity:1
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-out {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity:1
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity:0
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<template v-for="(item, index) in previewImage.imgList">
|
||||
<div
|
||||
v-for="(item, index) in previewImage.imgList"
|
||||
v-if="!~item.FileType.indexOf('pdf')"
|
||||
:key="index"
|
||||
class="item-img"
|
||||
:style="imgSize"
|
||||
:class="{
|
||||
'is-active': index === currentIndex
|
||||
'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}`">
|
||||
<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,22 +145,21 @@ 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
|
||||
|
|
@ -201,9 +209,8 @@ export default {
|
|||
return this.$refs.imagesWrapper.offsetWidth
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue