XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

非dicom预览显示顺序问题
continuous-integration/drone/push Build encountered an error Details

uat
wangxiaoshuang 2025-02-27 18:01:38 +08:00
parent 6b1f8c26b2
commit 35bff089b7
3 changed files with 343 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/views/none-dicom-show/components/image-viewer.vue
View File

@ -1,8 +1,14 @@
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
<template> <template>
<div style="width:100%;height:100%;"> <div style="width: 100%; height: 100%">
<transition name="viewer-fade"> <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 class="image-viewer_desc">
<!-- <span v-if="studyCode">NST00006</span> <!-- <span v-if="studyCode">NST00006</span>
<span v-if="modality">CT</span> <span v-if="modality">CT</span>
@ -38,37 +44,46 @@
<i class="el-image-viewer__actions__divider" /> <i class="el-image-viewer__actions__divider" />
<i class="el-icon-c-scale-to-original" @click="toggleMode" /> <i class="el-icon-c-scale-to-original" @click="toggleMode" />
<i class="el-image-viewer__actions__divider" /> <i class="el-image-viewer__actions__divider" />
<i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" /> <i
<i class="el-icon-refresh-right" @click="handleActions('clocelise')" /> class="el-icon-refresh-left"
@click="handleActions('anticlocelise')"
/>
<i
class="el-icon-refresh-right"
@click="handleActions('clocelise')"
/>
</div> </div>
</div> </div>
<!-- 图片 --> <!-- 图片 -->
<div id="image-viewer__canvas" class="image-viewer__canvas"> <div id="image-viewer__canvas" class="image-viewer__canvas">
<template v-for="(item, i) in urlList">
<img <img
v-for="(item, i) in urlList" v-if="!~item.FileType.indexOf('pdf')"
v-show="i === index" v-show="i === index"
:ref="`img${i}`" :ref="`img${i}`"
:key="item.Id" :key="item.Id"
crossorigin="anonymous" 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="imgStyle"
style="max-width:100%;max-height: 100%;" style="max-width: 100%; max-height: 100%"
@load="handleImgLoad" @load="handleImgLoad"
@error="handleImgError" @error="handleImgError"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
> />
</template>
</div> </div>
</div> </div>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import { on, off } from 'element-ui/src/utils/dom' 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' const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
@ -77,36 +92,36 @@ export default {
props: { props: {
urlList: { urlList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
studyCode: { studyCode: {
type: String, type: String,
default: '' default: '',
}, },
bodyPart: { bodyPart: {
type: String, type: String,
default: '' default: '',
}, },
modality: { modality: {
type: String, type: String,
default: '' default: '',
}, },
onSwitch: { onSwitch: {
type: Function, type: Function,
default: () => {} default: () => {},
}, },
onClose: { onClose: {
type: Function, type: Function,
default: () => {} default: () => {},
}, },
initialIndex: { initialIndex: {
type: Number, type: Number,
default: 0 default: 0,
}, },
zipImg: { zipImg: {
required: true, required: true,
default:'' default: '',
} },
}, },
data() { data() {
@ -120,7 +135,7 @@ export default {
deg: 0, deg: 0,
offsetX: 0, offsetX: 0,
offsetY: 0, offsetY: 0,
enableTransition: false enableTransition: false,
}, },
} }
}, },
@ -141,25 +156,25 @@ export default {
transform: `scale(${scale}) rotate(${deg}deg)`, transform: `scale(${scale}) rotate(${deg}deg)`,
transition: enableTransition ? 'transform .3s' : '', transition: enableTransition ? 'transform .3s' : '',
'margin-left': `${offsetX}px`, 'margin-left': `${offsetX}px`,
'margin-top': `${offsetY}px` 'margin-top': `${offsetY}px`,
} }
return style return style
} },
}, },
watch: { watch: {
initialIndex: { initialIndex: {
immediate: true, immediate: true,
handler(val) { handler(val) {
this.index = val this.index = val
} },
}, },
index: { index: {
immediate: true, immediate: true,
handler(val) { handler(val) {
this.reset() this.reset()
this.onSwitch(val) this.onSwitch(val)
} },
} },
}, },
mounted() { mounted() {
document.getElementById('image-viewer__canvas').onmousewheel = (event) => { document.getElementById('image-viewer__canvas').onmousewheel = (event) => {
@ -167,13 +182,13 @@ export default {
// 缩小 // 缩小
this.handleActions('zoomOut', { this.handleActions('zoomOut', {
zoomRate: 0.015, zoomRate: 0.015,
enableTransition: false enableTransition: false,
}) })
} else { } else {
// 放大 // 放大
this.handleActions('zoomIn', { this.handleActions('zoomIn', {
zoomRate: 0.015, zoomRate: 0.015,
enableTransition: false enableTransition: false,
}) })
} }
return false return false
@ -186,7 +201,7 @@ export default {
this.onClose() this.onClose()
}, },
deviceSupportInstall() { deviceSupportInstall() {
this._keyDownHandler = e => { this._keyDownHandler = (e) => {
e.stopPropagation() e.stopPropagation()
const keyCode = e.keyCode const keyCode = e.keyCode
switch (keyCode) { switch (keyCode) {
@ -216,17 +231,17 @@ export default {
break break
} }
} }
this._mouseWheelHandler = rafThrottle(e => { this._mouseWheelHandler = rafThrottle((e) => {
const delta = e.wheelDelta ? e.wheelDelta : -e.detail const delta = e.wheelDelta ? e.wheelDelta : -e.detail
if (delta > 0) { if (delta > 0) {
this.handleActions('zoomIn', { this.handleActions('zoomIn', {
zoomRate: 0.015, zoomRate: 0.015,
enableTransition: false enableTransition: false,
}) })
} else { } else {
this.handleActions('zoomOut', { this.handleActions('zoomOut', {
zoomRate: 0.015, zoomRate: 0.015,
enableTransition: false enableTransition: false,
}) })
} }
}) })
@ -254,12 +269,12 @@ export default {
const { offsetX, offsetY } = this.transform const { offsetX, offsetY } = this.transform
const startX = e.pageX const startX = e.pageX
const startY = e.pageY const startY = e.pageY
this._dragHandler = rafThrottle(ev => { this._dragHandler = rafThrottle((ev) => {
this.transform.offsetX = offsetX + ev.pageX - startX this.transform.offsetX = offsetX + ev.pageX - startX
this.transform.offsetY = offsetY + ev.pageY - startY this.transform.offsetY = offsetY + ev.pageY - startY
}) })
on(document, 'mousemove', this._dragHandler) on(document, 'mousemove', this._dragHandler)
on(document, 'mouseup', ev => { on(document, 'mouseup', (ev) => {
off(document, 'mousemove', this._dragHandler) off(document, 'mousemove', this._dragHandler)
}) })
@ -271,7 +286,7 @@ export default {
deg: 0, deg: 0,
offsetX: 0, offsetX: 0,
offsetY: 0, offsetY: 0,
enableTransition: false enableTransition: false,
} }
}, },
toggleMode() { toggleMode() {
@ -294,18 +309,22 @@ export default {
zoomRate: 0.2, zoomRate: 0.2,
rotateDeg: 90, rotateDeg: 90,
enableTransition: true, enableTransition: true,
...options ...options,
} }
const { transform } = this const { transform } = this
switch (action) { switch (action) {
case 'zoomOut': case 'zoomOut':
if (transform.scale > 0.2) { if (transform.scale > 0.2) {
transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3)) transform.scale = parseFloat(
(transform.scale - zoomRate).toFixed(3)
)
} }
break break
case 'zoomIn': case 'zoomIn':
if (transform.scale < 5) { if (transform.scale < 5) {
transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3)) transform.scale = parseFloat(
(transform.scale + zoomRate).toFixed(3)
)
} }
break break
case 'clocelise': case 'clocelise':
@ -316,12 +335,11 @@ export default {
break break
} }
transform.enableTransition = enableTransition transform.enableTransition = enableTransition
} },
} },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image-viewer__wrapper { .image-viewer__wrapper {
position: relative; position: relative;
top: 0; top: 0;
@ -338,10 +356,10 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
opacity:.8; opacity: 0.8;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
user-select:none user-select: none;
} }
.image-viewer__close { .image-viewer__close {
@ -350,7 +368,7 @@ export default {
right: 40px; right: 40px;
width: 40px; width: 40px;
height: 40px; height: 40px;
font-size:40px font-size: 40px;
} }
.image-viewer_desc { .image-viewer_desc {
position: absolute; position: absolute;
@ -377,7 +395,7 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items:center align-items: center;
} }
.image-viewer__actions { .image-viewer__actions {
left: 50%; left: 50%;
@ -388,7 +406,7 @@ export default {
padding: 0 23px; padding: 0 23px;
background-color: #606266; background-color: #606266;
border-color: #fff; border-color: #fff;
border-radius:22px border-radius: 22px;
} }
.image-viewer__actions__inner { .image-viewer__actions__inner {
width: 100%; width: 100%;
@ -399,25 +417,26 @@ export default {
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; 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%; top: 50%;
width: 44px; width: 44px;
height: 44px; height: 44px;
font-size: 24px; font-size: 24px;
color: #fff; color: #fff;
background-color: #606266; background-color: #606266;
border-color:#fff border-color: #fff;
} }
.image-viewer__prev { .image-viewer__prev {
transform: translateY(-50%); transform: translateY(-50%);
left:40px left: 40px;
} }
.image-viewer__next { .image-viewer__next {
transform: translateY(-50%); transform: translateY(-50%);
right: 40px; right: 40px;
text-indent:2px text-indent: 2px;
} }
.image-viewer__mask { .image-viewer__mask {
position: absolute; position: absolute;
@ -425,36 +444,35 @@ export default {
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
opacity:.5; opacity: 0.5;
// background:#000 // background:#000
} }
.viewer-fade-enter-active { .viewer-fade-enter-active {
animation:viewer-fade-in .3s animation: viewer-fade-in 0.3s;
} }
.viewer-fade-leave-active { .viewer-fade-leave-active {
animation:viewer-fade-out .3s animation: viewer-fade-out 0.3s;
} }
@keyframes viewer-fade-in { @keyframes viewer-fade-in {
0% { 0% {
transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);
opacity:0 opacity: 0;
} }
100% { 100% {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
opacity:1 opacity: 1;
} }
} }
@keyframes viewer-fade-out { @keyframes viewer-fade-out {
0% { 0% {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
opacity:1 opacity: 1;
} }
100% { 100% {
transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);
opacity:0 opacity: 0;
} }
} }
</style> </style>

61
src/views/none-dicom-show/components/preview.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="none-dicom_preview-wrapper"> <div class="none-dicom_preview-wrapper">
<div class="image-viewer-wrapper"> <div class="image-viewer-wrapper">
<!-- 预览图像 --> <!-- 预览图像 -->
<ImageViewer <ImageViewer
@ -15,10 +14,10 @@
:study-code="previewImage.studyCode" :study-code="previewImage.studyCode"
:body-part="previewImage.bodyPart" :body-part="previewImage.bodyPart"
:modality="previewImage.modality" :modality="previewImage.modality"
:zip-img='zipImg' :zip-img="zipImg"
/> />
</div> </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="">
<div class="img-wrapper"> <div class="img-wrapper">
<el-button <el-button
@ -33,21 +32,31 @@
<slot name="empty">暂无数据</slot> <slot name="empty">暂无数据</slot>
</div> </div>
<div v-show="!noData" class="items" :style="itemsStyle"> <div v-show="!noData" class="items" :style="itemsStyle">
<template v-for="(item, index) in previewImage.imgList">
<div <div
v-for="(item, index) in previewImage.imgList" v-if="!~item.FileType.indexOf('pdf')"
:key="index" :key="index"
class="item-img" class="item-img"
:style="imgSize" :style="imgSize"
:class="{ :class="{
'is-active': index === currentIndex 'is-active': index === currentIndex,
}" }"
@click="selected(index)" @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"> <p v-if="item.FileName" class="item-date">
{{ `${index + 1}` }} {{ `${index + 1}` }}
</p> </p>
</div> </div>
</template>
</div> </div>
</div> </div>
<el-button <el-button
@ -63,12 +72,12 @@
</div> </div>
</template> </template>
<script> <script>
import ImageViewer from './image-viewer'; import ImageViewer from './image-viewer'
import zipImg from "@/assets/zip.png"; import zipImg from '@/assets/zip.png'
export default { export default {
name: 'Preview', name: 'Preview',
components: { components: {
ImageViewer ImageViewer,
}, },
props: { props: {
imgSize: { imgSize: {
@ -76,13 +85,13 @@ export default {
default: () => { default: () => {
return { return {
width: '120px', width: '120px',
height: '120px' height: '120px',
}
} }
}, },
},
value: { value: {
type: Number, type: Number,
default: null default: null,
}, },
previewImage: { previewImage: {
type: Object, type: Object,
@ -94,11 +103,10 @@ export default {
infinite: true, // 是否可以循环切换 infinite: true, // 是否可以循环切换
studyCode: '', studyCode: '',
modality: '', modality: '',
bodyPart: '' bodyPart: '',
} }
} },
} },
}, },
data() { data() {
return { return {
@ -107,14 +115,14 @@ export default {
translateX: 0, translateX: 0,
pageSize: 0, // 一页展示的图片数 pageSize: 0, // 一页展示的图片数
urlList: [], urlList: [],
zipImg zipImg,
} }
}, },
computed: { computed: {
// 偏移度数 // 偏移度数
itemsStyle() { itemsStyle() {
return { return {
transform: `translateX(${-this.translateX}px)` transform: `translateX(${-this.translateX}px)`,
} }
}, },
// 每一项宽度 // 每一项宽度
@ -128,7 +136,8 @@ export default {
disabledNext() { disabledNext() {
// 禁用后一页按钮 // 禁用后一页按钮
return ( return (
this.translateX >= (this.previewImage.imgList.length - this.pageSize) * this.itemWidth this.translateX >=
(this.previewImage.imgList.length - this.pageSize) * this.itemWidth
) )
}, },
noData() { noData() {
@ -136,22 +145,21 @@ export default {
}, },
dataLength() { dataLength() {
return this.previewImage.imgList.length return this.previewImage.imgList.length
} },
}, },
watch: { watch: {
value: { value: {
immediate: true, immediate: true,
handler(val) { handler(val) {
this.currentIndex = val this.currentIndex = val
} },
}, },
'previewImage.index': { 'previewImage.index': {
immediate: true, immediate: true,
handler(val) { handler(val) {
this.urlList.index = val this.urlList.index = val
} },
} },
}, },
mounted() { mounted() {
this.pageSize = this.wrapperWidth() / this.itemWidth this.pageSize = this.wrapperWidth() / this.itemWidth
@ -201,9 +209,8 @@ export default {
return this.$refs.imagesWrapper.offsetWidth return this.$refs.imagesWrapper.offsetWidth
} }
return 0 return 0
} },
},
}
} }
</script> </script>

8
src/views/none-dicom-show/index.vue
View File

@ -177,6 +177,7 @@ export default {
}) })
}, },
selected(file, studyIndex, fileIndex, isChangeSub = false) { selected(file, studyIndex, fileIndex, isChangeSub = false) {
this.currentFileId = file.Id
if (!!~file.FileType.indexOf('pdf')) { if (!!~file.FileType.indexOf('pdf')) {
this.pdfFile.path = file.Path || file.FullFilePath this.pdfFile.path = file.Path || file.FullFilePath
this.pdfFile.type = 'pdf' this.pdfFile.type = 'pdf'
@ -185,11 +186,10 @@ export default {
} else { } else {
this.showPDF = false this.showPDF = false
} }
this.currentFileId = file.Id
this.currentStudyIndex = studyIndex this.currentStudyIndex = studyIndex
this.previewImage.imgList = this.studyList[ this.previewImage.imgList =
studyIndex this.studyList[studyIndex].NoneDicomStudyFileList
].NoneDicomStudyFileList.filter((item) => !~item.FileType.indexOf('pdf'))
this.currentStudyFileIndex = fileIndex this.currentStudyFileIndex = fileIndex
this.previewImage.index = fileIndex this.previewImage.index = fileIndex
this.previewImage.studyCode = this.studyList[studyIndex].CodeView this.previewImage.studyCode = this.studyList[studyIndex].CodeView