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

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

@ -1,13 +1,19 @@
/* 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>
<span v-if="bodyPart">上/下腹部</span><br> --> <span v-if="bodyPart">上/下腹部</span><br> -->
{{ `${index+1} / ${urlList.length}` }} {{ `${index + 1} / ${urlList.length}` }}
</span> </span>
<!-- 关闭 --> <!-- 关闭 -->
<span class="image-viewer__btn image-viewer__close" @click="hide"> <span class="image-viewer__btn image-viewer__close" @click="hide">
@ -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">
<img <template v-for="(item, i) in urlList">
v-for="(item, i) in urlList" <img
v-show="i === index" v-if="!~item.FileType.indexOf('pdf')"
:ref="`img${i}`" v-show="i === index"
:key="item.Id" :ref="`img${i}`"
crossorigin="anonymous" :key="item.Id"
:src="item.FileType&&item.FileType.indexOf('zip')>=0?zipImg:`${OSSclientConfig.basePath}${item.Path}`" crossorigin="anonymous"
:style="imgStyle" :src="
style="max-width:100%;max-height: 100%;" item.FileType && item.FileType.indexOf('zip') >= 0
@load="handleImgLoad" ? zipImg
@error="handleImgError" : `${OSSclientConfig.basePath}${item.Path}`
@mousedown="handleMouseDown" "
> :style="imgStyle"
style="max-width: 100%; max-height: 100%"
@load="handleImgLoad"
@error="handleImgError"
@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: {
required: true,
default: '',
}, },
zipImg:{
required:true,
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,47 +335,46 @@ 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; right: 0;
right:0; bottom: 0;
bottom:0; left: 0;
left:0; width: 100%;
width: 100%; height: 100%;
height: 100%;
} }
.image-viewer__btn{ .image-viewer__btn {
position:absolute; position: absolute;
z-index:1; z-index: 1;
display:flex; display: flex;
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 {
display: none; display: none;
top:40px; top: 40px;
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;
top:40px; top: 40px;
left:40px; left: 40px;
font-size:15px; font-size: 15px;
padding: 5px; padding: 5px;
height: 30px; height: 30px;
width: 70px; width: 70px;
@ -369,92 +387,92 @@ export default {
border-radius: 17px; border-radius: 17px;
// border-radius: 2%; // border-radius: 2%;
} }
.image-viewer__canvas{ .image-viewer__canvas {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width:100%; width: 100%;
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%;
bottom:30px; bottom: 30px;
transform:translateX(-50%); transform: translateX(-50%);
width:282px; width: 282px;
height:44px; height: 44px;
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%;
height:100%; height: 100%;
text-align:justify; text-align: justify;
cursor:default; cursor: default;
font-size:23px; font-size: 23px;
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,
top:50%; .image-viewer__prev {
width:44px; top: 50%;
height:44px; width: 44px;
font-size:24px; height: 44px;
color:#fff; font-size: 24px;
background-color:#606266; color: #fff;
border-color:#fff background-color: #606266;
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;
width:100%; width: 100%;
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>

317
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">
<div <template v-for="(item, index) in previewImage.imgList">
v-for="(item, index) in previewImage.imgList" <div
:key="index" v-if="!~item.FileType.indexOf('pdf')"
class="item-img" :key="index"
:style="imgSize" class="item-img"
:class="{ :style="imgSize"
'is-active': index === currentIndex :class="{
}" '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}`"> >
<p v-if="item.FileName" class="item-date"> <img
{{ `${index+1}` }} :title="item.FileName"
</p> crossorigin="anonymous"
</div> :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>
</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,28 +145,27 @@ 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
this.urlList = this.previewImage this.urlList = this.previewImage
const scope = this const scope = this
window.onresize = function() { window.onresize = function () {
scope.pageSize = scope.wrapperWidth() / scope.itemWidth scope.pageSize = scope.wrapperWidth() / scope.itemWidth
scope.selected(scope.currentIndex) scope.selected(scope.currentIndex)
} }
@ -201,148 +209,147 @@ export default {
return this.$refs.imagesWrapper.offsetWidth return this.$refs.imagesWrapper.offsetWidth
} }
return 0 return 0
} },
},
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.none-dicom_preview-wrapper{ .none-dicom_preview-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.image-viewer-wrapper{ .image-viewer-wrapper {
flex: 1; 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;
} }
.images::before { .thumbnail-wrapper {
height: 130px;
}
.img-content {
position: absolute; position: absolute;
z-index: 5; left: 0;
top: 0; bottom: 10px;
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%; width: 100%;
height: 100%; }
margin: 0 2px; .img-wrapper {
.empty-text { display: flex;
color: rgb(158, 158, 158); position: relative;
margin: 0 20px;
height: 120px;
.to {
width: 32px;
height: 100%; height: 100%;
display: flex; padding: 0;
align-items: center;
justify-content: center;
} }
.items { .images::before {
position: absolute; position: absolute;
z-index: 5;
top: 0; top: 0;
left: 0;
display: flex;
// width: 6000px;
height: 100%; height: 100%;
align-items: center; width: 84px;
transition: transform 0.25s ease; content: '';
.item-img { pointer-events: none;
display: inline-block; background: -webkit-gradient(
box-sizing: border-box; linear,
position: relative; left top,
margin-right: 8px; right top,
border: 2px solid rgba(0, 0, 0, 0); from(#fff),
cursor: pointer; color-stop(50%, rgba(0, 0, 0, 0))
.item-date { );
bottom: 0px; background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%);
position: absolute; background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%);
width: 100%; }
height: 24px; .images::after {
background: rgba(0, 0, 0, 0.2); position: absolute;
text-align: center; z-index: 5;
line-height: 24px; top: 0;
color: white; height: 100%;
} right: 0;
img { width: 84px;
width: 100%; content: '';
height: 100%; 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 { .items {
// border-color: #409EFF;
opacity: 0;
}
.item-img::after {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; display: flex;
// width: 6000px;
height: 100%; height: 100%;
content: ''; align-items: center;
opacity: 0.2; transition: transform 0.25s ease;
pointer-events: none; .item-img {
-webkit-transition: opacity 0.3s ease; display: inline-block;
-o-transition: opacity 0.3s ease; box-sizing: border-box;
transition: opacity 0.3s ease; position: relative;
background-color: #fff; margin-right: 8px;
} border: 2px solid rgba(0, 0, 0, 0);
.is-active { cursor: pointer;
border-color: #409eff; .item-date {
} bottom: 0px;
.is-active:after { position: absolute;
opacity: 0; 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>

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