非dicom阅片、预览添加排序
continuous-integration/drone/push Build encountered an error
Details
continuous-integration/drone/push Build encountered an error
Details
parent
8122464fbb
commit
6cd5e7b957
|
|
@ -8509,7 +8509,7 @@
|
|||
var _writeOptions$fragmen = writeOptions.fragmentMultiframe,
|
||||
fragmentMultiframe = _writeOptions$fragmen === void 0 ? true : _writeOptions$fragmen;
|
||||
var _writeOptions$offset = writeOptions.startOffset,
|
||||
startOffset = _writeOptions$offset === void 0 ? true : _writeOptions$offset;
|
||||
isNeedStartOffset = _writeOptions$offset === void 0 ? true : _writeOptions$offset;
|
||||
value = value === null || value === undefined ? [] : value;
|
||||
|
||||
if (isEncapsulated) {
|
||||
|
|
@ -8537,7 +8537,9 @@
|
|||
for (i = 0; i < frames; i++) {
|
||||
var _needsPadding = Boolean(value[i].byteLength & 1);
|
||||
|
||||
if (startOffset) startOffset.push(binaryStream.size);
|
||||
if (isNeedStartOffset) {
|
||||
startOffset.push(binaryStream.size);
|
||||
}
|
||||
var frameBuffer = value[i],
|
||||
frameStream = new ReadBufferStream(frameBuffer);
|
||||
var fragmentsLength = 1;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,8 @@
|
|||
<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 }"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -21,18 +16,12 @@
|
|||
</span>
|
||||
<!-- Arrow -->
|
||||
<template v-if="!isSingle">
|
||||
<span
|
||||
class="image-viewer__btn image-viewer__prev"
|
||||
:class="{ 'is-disabled': !infinite && isFirst }"
|
||||
@click="prev"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -44,36 +33,19 @@
|
|||
<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-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}`
|
||||
"
|
||||
:style="imgStyle"
|
||||
style="max-width: 100%; max-height: 100%"
|
||||
@load="handleImgLoad"
|
||||
@error="handleImgError"
|
||||
@mousedown="handleMouseDown"
|
||||
/>
|
||||
<img 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}`
|
||||
" :style="imgStyle" style="max-width: 100%; max-height: 100%" @load="handleImgLoad"
|
||||
@error="handleImgError" @mousedown="handleMouseDown" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,11 +80,11 @@ export default {
|
|||
},
|
||||
onSwitch: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
default: () => { },
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
default: () => { },
|
||||
},
|
||||
initialIndex: {
|
||||
type: Number,
|
||||
|
|
@ -172,7 +144,9 @@ export default {
|
|||
immediate: true,
|
||||
handler(val) {
|
||||
this.reset()
|
||||
this.onSwitch(val)
|
||||
if (val >= 0) {
|
||||
this.onSwitch(this.urlList[val].Id)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -349,6 +323,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-viewer__btn {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -370,6 +345,7 @@ export default {
|
|||
height: 40px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.image-viewer_desc {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
|
|
@ -387,6 +363,7 @@ export default {
|
|||
border-radius: 17px;
|
||||
// border-radius: 2%;
|
||||
}
|
||||
|
||||
.image-viewer__canvas {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -397,6 +374,7 @@ export default {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-viewer__actions {
|
||||
left: 50%;
|
||||
bottom: 30px;
|
||||
|
|
@ -408,6 +386,7 @@ export default {
|
|||
border-color: #fff;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.image-viewer__actions__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -419,6 +398,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.image-viewer__next,
|
||||
.image-viewer__prev {
|
||||
top: 50%;
|
||||
|
|
@ -429,15 +409,18 @@ export default {
|
|||
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%;
|
||||
|
|
@ -447,9 +430,11 @@ export default {
|
|||
opacity: 0.5;
|
||||
// background:#000
|
||||
}
|
||||
|
||||
.viewer-fade-enter-active {
|
||||
animation: viewer-fade-in 0.3s;
|
||||
}
|
||||
|
||||
.viewer-fade-leave-active {
|
||||
animation: viewer-fade-out 0.3s;
|
||||
}
|
||||
|
|
@ -459,6 +444,7 @@ export default {
|
|||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
|
|
@ -470,6 +456,7 @@ export default {
|
|||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -2,56 +2,29 @@
|
|||
<div class="none-dicom_preview-wrapper">
|
||||
<div class="image-viewer-wrapper">
|
||||
<!-- 预览图像 -->
|
||||
<ImageViewer
|
||||
v-if="previewVisible"
|
||||
:on-switch="
|
||||
(index) => {
|
||||
selected(index)
|
||||
}
|
||||
"
|
||||
:initial-index="previewImage.index"
|
||||
:url-list="previewImage.imgList"
|
||||
:study-code="previewImage.studyCode"
|
||||
:body-part="previewImage.bodyPart"
|
||||
:modality="previewImage.modality"
|
||||
:zip-img="zipImg"
|
||||
/>
|
||||
<ImageViewer v-if="previewVisible" :on-switch="(index) => {
|
||||
selected(index)
|
||||
}
|
||||
" :initial-index="previewImage.index" :url-list="previewImage.imgList" :study-code="previewImage.studyCode"
|
||||
:body-part="previewImage.bodyPart" :modality="previewImage.modality" :zip-img="zipImg" />
|
||||
</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"
|
||||
/>
|
||||
<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">
|
||||
<template v-for="(item, index) in previewImage.imgList">
|
||||
<div
|
||||
v-if="!~item.FileType.indexOf('pdf')"
|
||||
:key="index"
|
||||
class="item-img"
|
||||
:style="imgSize"
|
||||
:class="{
|
||||
'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}`
|
||||
"
|
||||
/>
|
||||
<div v-if="!~item.FileType.indexOf('pdf')" :key="index" class="item-img" :style="imgSize" :class="{
|
||||
'is-active': item.Id === currentFileId,
|
||||
}" @click="selected(item.Id)">
|
||||
<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>
|
||||
|
|
@ -59,13 +32,7 @@
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
icon="el-icon-d-arrow-right"
|
||||
:disabled="disabledNext"
|
||||
plain
|
||||
class="right to"
|
||||
@click="Left"
|
||||
/>
|
||||
<el-button icon="el-icon-d-arrow-right" :disabled="disabledNext" plain class="right to" @click="Left" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,6 +60,10 @@ export default {
|
|||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
currentFileId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
previewImage: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
|
|
@ -167,7 +138,7 @@ export default {
|
|||
const scope = this
|
||||
window.onresize = function () {
|
||||
scope.pageSize = scope.wrapperWidth() / scope.itemWidth
|
||||
scope.selected(scope.currentIndex)
|
||||
scope.selected(scope.currentFileId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -185,7 +156,8 @@ export default {
|
|||
this.translateX = maxTrans
|
||||
}
|
||||
},
|
||||
selected(index) {
|
||||
selected(id) {
|
||||
let index = this.previewImage.imgList.findIndex(item => item.Id === id)
|
||||
const center = this.pageSize >> 1
|
||||
// 最后一页的中间位置
|
||||
const lastCenter = this.dataLength - center
|
||||
|
|
@ -202,7 +174,7 @@ export default {
|
|||
if (this.currentIndex !== index) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
this.$emit('selectedImg', index)
|
||||
this.$emit('selectedImg', id)
|
||||
},
|
||||
wrapperWidth() {
|
||||
if (this.$refs.imagesWrapper) {
|
||||
|
|
@ -224,25 +196,30 @@ export default {
|
|||
.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;
|
||||
}
|
||||
|
||||
.images::before {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
|
|
@ -251,16 +228,15 @@ export default {
|
|||
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: -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;
|
||||
|
|
@ -270,22 +246,22 @@ export default {
|
|||
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: -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%;
|
||||
|
|
@ -293,6 +269,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.items {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -302,6 +279,7 @@ export default {
|
|||
height: 100%;
|
||||
align-items: center;
|
||||
transition: transform 0.25s ease;
|
||||
|
||||
.item-img {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -309,6 +287,7 @@ export default {
|
|||
margin-right: 8px;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
|
||||
.item-date {
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
|
|
@ -319,15 +298,18 @@ export default {
|
|||
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;
|
||||
|
|
@ -342,9 +324,11 @@ export default {
|
|||
transition: opacity 0.3s ease;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.is-active:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div v-loading="loading" class="img-container">
|
||||
<el-card class="box-card left">
|
||||
<div class="title">
|
||||
<div class="title" style="display: flex;align-items: center;">
|
||||
<div style="margin-right: 5px;cursor: pointer;" @click.stop="sortFile">
|
||||
<i :class="['el-icon-caret-top', Asc ? '' : 'icon_check']" style="display: block;margin-bottom: -5px;"></i>
|
||||
<i :class="['el-icon-caret-bottom', !Asc ? '' : 'icon_check']" style="display: block; margin-top: -5px;"></i>
|
||||
</div>
|
||||
{{ $t('trials:none-dicom-show:fileList') }}
|
||||
</div>
|
||||
<div class="left-content">
|
||||
|
|
@ -77,7 +81,8 @@
|
|||
<el-card class="box-card right">
|
||||
<div style="width: 100%; height: 100%" v-if="!showPDF">
|
||||
<Preview v-if="previewImage.imgList.length > 0" ref="previewImage" style="width: 100%"
|
||||
:preview-image="previewImage" :value="currentStudyFileIndex" @selectedImg="selectedImg" />
|
||||
:preview-image="previewImage" :value="currentStudyFileIndex" @selectedImg="selectedImg"
|
||||
:currentFileId="currentFileId" />
|
||||
</div>
|
||||
<div style="width: 100%; height: 100%" v-else>
|
||||
<PreviewFile :file-path="pdfFile.path" :file-type="pdfFile.type" />
|
||||
|
|
@ -140,6 +145,7 @@ export default {
|
|||
isAudit: false,
|
||||
|
||||
activeNames: [],
|
||||
Asc: false
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
|
|
@ -157,6 +163,26 @@ export default {
|
|||
// 默认选择第一个文件
|
||||
},
|
||||
methods: {
|
||||
sortFile() {
|
||||
if (this.Asc) {
|
||||
this.Asc = false
|
||||
} else {
|
||||
this.Asc = true
|
||||
}
|
||||
console.log(this.Asc, 'Asc')
|
||||
this.studyList.forEach(study => {
|
||||
if (study.NoneDicomStudyFileList.length > 0) {
|
||||
if (this.Asc) {
|
||||
study.NoneDicomStudyFileList.sort((a, b) => b.FileName.localeCompare(a.FileName))
|
||||
} else {
|
||||
study.NoneDicomStudyFileList.sort((a, b) => a.FileName.localeCompare(b.FileName))
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
this.previewImage.imgList = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList
|
||||
this.previewImage.index = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === this.currentFileId)
|
||||
},
|
||||
handleChange() { },
|
||||
changeReadingStatus(callback, row, file) {
|
||||
let statusStr = ''
|
||||
|
|
@ -321,12 +347,13 @@ export default {
|
|||
this.previewImage.modality = this.studyList[studyIndex].Modality
|
||||
this.$nextTick(() => {
|
||||
if (isChangeSub) {
|
||||
this.$refs['previewImage'].selected(fileIndex)
|
||||
this.$refs['previewImage'].selected(this.currentFileId)
|
||||
}
|
||||
})
|
||||
},
|
||||
selectedImg(fileIndex) {
|
||||
selectedImg(id) {
|
||||
if (this.studyList.length > 0) {
|
||||
let fileIndex = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === id)
|
||||
this.currentStudyFileIndex = fileIndex
|
||||
this.currentFileId =
|
||||
this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[
|
||||
|
|
@ -354,6 +381,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon_check {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@
|
|||
<template>
|
||||
<div v-loading="loading" 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>
|
||||
<span v-if="bodyPart">上/下腹部</span><br> -->
|
||||
{{ `${index+1} / ${urlList.length}` }}
|
||||
{{ `${index + 1} / ${urlList.length}` }}
|
||||
</span>
|
||||
<!-- 关闭 -->
|
||||
<span class="image-viewer__btn image-viewer__close" @click="hide">
|
||||
|
|
@ -15,18 +16,12 @@
|
|||
</span>
|
||||
<!-- Arrow -->
|
||||
<template v-if="!isSingle">
|
||||
<span
|
||||
class="image-viewer__btn image-viewer__prev"
|
||||
:class="{ 'is-disabled': !infinite && isFirst }"
|
||||
@click="prev"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -40,34 +35,25 @@
|
|||
<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
|
||||
v-if="readingTaskState < 2"
|
||||
class="el-icon-bottom-right"
|
||||
:style="{cursor:isToolDisabled || readingTaskState >=2 ?'not-allowed':'pointer'}"
|
||||
@click="handleDrawArrow"
|
||||
/>
|
||||
<i v-if="readingTaskState < 2" class="el-icon-bottom-right"
|
||||
:style="{ cursor: isToolDisabled || readingTaskState >= 2 ? 'not-allowed' : 'pointer' }"
|
||||
@click="handleDrawArrow" />
|
||||
|
||||
<!-- <i
|
||||
class="rectangle"
|
||||
:style="{cursor:isToolDisabled || readingTaskState >=2 ?'not-allowed':'pointer'}"
|
||||
@click="handleDrawRectangle"
|
||||
/> -->
|
||||
<svg-icon v-if="readingTaskState < 2" icon-class="rectangle" class="svg-icon" :style="{cursor:isToolDisabled || readingTaskState >=2 ?'not-allowed':'pointer'}" @click="handleDrawRectangle" />
|
||||
<svg-icon v-if="readingTaskState < 2" icon-class="rectangle" class="svg-icon"
|
||||
:style="{ cursor: isToolDisabled || readingTaskState >= 2 ? 'not-allowed' : 'pointer' }"
|
||||
@click="handleDrawRectangle" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片 -->
|
||||
<div id="image-viewer__canvas" class="image-viewer__canvas">
|
||||
<canvas
|
||||
v-if="canvasSize.width && canvasPosition.y"
|
||||
id="canvas"
|
||||
:height="canvasSize.height"
|
||||
:width="canvasSize.width"
|
||||
:style="imgStyle"
|
||||
@mousedown="handleMouseDown"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseup="handleMouseUp"
|
||||
@contextmenu="handleContextmenu"
|
||||
/>
|
||||
<canvas v-if="canvasSize.width && canvasPosition.y" id="canvas" :height="canvasSize.height"
|
||||
:width="canvasSize.width" :style="imgStyle" @mousedown="handleMouseDown" @mousemove="handleMouseMove"
|
||||
@mouseup="handleMouseUp" @contextmenu="handleContextmenu" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -111,11 +97,11 @@ export default {
|
|||
},
|
||||
onSwitch: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
default: () => { }
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
default: () => { }
|
||||
},
|
||||
initialIndex: {
|
||||
type: Number,
|
||||
|
|
@ -191,11 +177,15 @@ export default {
|
|||
immediate: true,
|
||||
handler(val) {
|
||||
this.reset()
|
||||
this.onSwitch(val)
|
||||
if (val >= 0) {
|
||||
this.imgId = this.urlList[val].Id
|
||||
this.onSwitch(this.imgId)
|
||||
|
||||
this.imgUrl = this.urlList[val].Path
|
||||
|
||||
this.loadImage()
|
||||
}
|
||||
|
||||
this.imgUrl = this.urlList[val].Path
|
||||
this.imgId = this.urlList[val].Id
|
||||
this.loadImage()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -359,7 +349,7 @@ export default {
|
|||
y: canvasDiv.offsetHeight / 2 - img.height / 2 - 25
|
||||
} // 背景居中
|
||||
|
||||
this.$nextTick(async() => {
|
||||
this.$nextTick(async () => {
|
||||
ctx = document.getElementById('canvas').getContext('2d') // 获取上下文
|
||||
await ctx.drawImage(img, 0, 0, img.width, img.height) // 在canvas中绘制图片(图片、起始位置、绘图尺寸)
|
||||
this.drawToArr()
|
||||
|
|
@ -779,42 +769,43 @@ export default {
|
|||
}
|
||||
</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__wrapper {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-viewer__close{
|
||||
.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
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40px
|
||||
}
|
||||
.image-viewer_desc{
|
||||
position:absolute;
|
||||
top:40px;
|
||||
left:40px;
|
||||
font-size:15px;
|
||||
|
||||
.image-viewer_desc {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
font-size: 15px;
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
width: 70px;
|
||||
|
|
@ -827,92 +818,104 @@ export default {
|
|||
border-radius: 17px;
|
||||
// border-radius: 2%;
|
||||
}
|
||||
.image-viewer__canvas{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width:100%;
|
||||
height:100%;
|
||||
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
|
||||
}
|
||||
.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
|
||||
.image-viewer__canvas {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-in{
|
||||
0%{
|
||||
transform:translate3d(0,-20px,0);
|
||||
opacity:0
|
||||
}
|
||||
100%{
|
||||
transform:translate3d(0,0,0);
|
||||
opacity:1
|
||||
}
|
||||
.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
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-out{
|
||||
0%{
|
||||
transform:translate3d(0,0,0);
|
||||
opacity:1
|
||||
}
|
||||
100%{
|
||||
transform:translate3d(0,-20px,0);
|
||||
opacity:0
|
||||
}
|
||||
.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
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -3,61 +3,33 @@
|
|||
|
||||
<div class="image-viewer-wrapper">
|
||||
<!-- 预览图像 -->
|
||||
<NoneDicomsCanvas
|
||||
v-if="previewVisible"
|
||||
:on-switch="
|
||||
(index) => {
|
||||
selected(index)
|
||||
}
|
||||
"
|
||||
:initial-index="previewImage.index"
|
||||
:url-list="previewImage.imgList"
|
||||
:study-code="previewImage.studyCode"
|
||||
:body-part="previewImage.bodyPart"
|
||||
:modality="previewImage.modality"
|
||||
:study-id="previewImage.studyId"
|
||||
:reading-task-state="readingTaskState"
|
||||
/>
|
||||
<NoneDicomsCanvas v-if="previewVisible" :on-switch="(index) => {
|
||||
selected(index)
|
||||
}
|
||||
" :initial-index="previewImage.index" :url-list="previewImage.imgList" :study-code="previewImage.studyCode"
|
||||
:body-part="previewImage.bodyPart" :modality="previewImage.modality" :study-id="previewImage.studyId"
|
||||
:reading-task-state="readingTaskState" />
|
||||
</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"
|
||||
/>
|
||||
<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">{{ $t('trial:reading:noneDicoms:noData') }}</slot>
|
||||
</div>
|
||||
<div v-show="!noData" class="items" :style="itemsStyle">
|
||||
<div
|
||||
v-for="(item, index) in previewImage.imgList"
|
||||
:key="index"
|
||||
class="item-img"
|
||||
:style="imgSize"
|
||||
:class="{
|
||||
'is-active': index === currentIndex
|
||||
}"
|
||||
@click="selected(index)"
|
||||
>
|
||||
<div v-for="(item, index) in previewImage.imgList" :key="index" class="item-img" :style="imgSize" :class="{
|
||||
'is-active': item.Id === currentFileId
|
||||
}" @click="selected(item.Id)">
|
||||
<img :title="item.FileName" :src="`${OSSclientConfig.basePath + item.Path}`" crossorigin="anonymous">
|
||||
<p v-if="item.FileName" class="item-date">
|
||||
{{ `${index+1}` }}
|
||||
{{ `${index + 1}` }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
icon="el-icon-d-arrow-right"
|
||||
:disabled="disabledNext"
|
||||
plain
|
||||
class="right to"
|
||||
@click="Left"
|
||||
/>
|
||||
<el-button icon="el-icon-d-arrow-right" :disabled="disabledNext" plain class="right to" @click="Left" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,6 +60,10 @@ export default {
|
|||
type: Number,
|
||||
default: null
|
||||
},
|
||||
currentFileId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
previewImage: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
|
|
@ -161,9 +137,9 @@ export default {
|
|||
this.pageSize = this.wrapperWidth() / this.itemWidth
|
||||
this.urlList = this.previewImage
|
||||
const scope = this
|
||||
window.onresize = function() {
|
||||
window.onresize = function () {
|
||||
scope.pageSize = scope.wrapperWidth() / scope.itemWidth
|
||||
scope.selected(scope.currentIndex)
|
||||
scope.selected(scope.currentFileId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -181,7 +157,8 @@ export default {
|
|||
this.translateX = maxTrans
|
||||
}
|
||||
},
|
||||
selected(index) {
|
||||
selected(id) {
|
||||
let index = this.previewImage.imgList.findIndex(item => item.Id === id)
|
||||
const center = this.pageSize >> 1
|
||||
// 最后一页的中间位置
|
||||
const lastCenter = this.dataLength - center
|
||||
|
|
@ -198,7 +175,7 @@ export default {
|
|||
if (this.currentIndex !== index) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
this.$emit('selectedImg', index)
|
||||
this.$emit('selectedImg', id)
|
||||
},
|
||||
wrapperWidth() {
|
||||
if (this.$refs.imagesWrapper) {
|
||||
|
|
@ -212,35 +189,40 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.preview-wrapper{
|
||||
.preview-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.image-viewer-wrapper{
|
||||
.image-viewer-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
.thumbnail-wrapper{
|
||||
|
||||
.thumbnail-wrapper {
|
||||
height: 130px;
|
||||
}
|
||||
.img-content{
|
||||
|
||||
.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 {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
|
|
@ -249,16 +231,15 @@ export default {
|
|||
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: -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;
|
||||
|
|
@ -268,22 +249,22 @@ export default {
|
|||
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: -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%;
|
||||
|
|
@ -291,6 +272,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.items {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -300,6 +282,7 @@ export default {
|
|||
height: 100%;
|
||||
align-items: center;
|
||||
transition: transform 0.25s ease;
|
||||
|
||||
.item-img {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -307,6 +290,7 @@ export default {
|
|||
margin-right: 8px;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
|
||||
.item-date {
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
|
|
@ -317,15 +301,18 @@ export default {
|
|||
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;
|
||||
|
|
@ -340,9 +327,11 @@ export default {
|
|||
transition: opacity 0.3s ease;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.is-active:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -349,7 +349,7 @@ export default {
|
|||
this.dialogVisible = true
|
||||
this.cdVisitTaskId = this.visitTaskId
|
||||
}
|
||||
if ((this.CriterionType === 19 || this.CriterionType === 20) && !this.IsViewStudyPart) {
|
||||
if ((this.CriterionType === 19 || this.CriterionType === 20) && !this.IsViewStudyPart && this.readingCategory !== 4) {
|
||||
this.isFullscreen = false
|
||||
this.dialogBodyPartVisible = true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
<template>
|
||||
<div v-loading="loading" class="img-container">
|
||||
<el-card class="box-card left">
|
||||
<div v-if="otherInfo && otherInfo.IsReadingShowSubjectInfo" class="title" style="text-align:center">
|
||||
<div v-if="otherInfo && otherInfo.IsReadingShowSubjectInfo" class="title"
|
||||
style="display: flex;align-items: center;flex-wrap: wrap;">
|
||||
<div style="margin-right: 5px;cursor: pointer;display: inline-block" @click.stop="sortFile">
|
||||
<i :class="['el-icon-caret-top', Asc ? '' : 'icon_check']" style="display: block;margin-bottom: -5px;"></i>
|
||||
<i :class="['el-icon-caret-bottom', !Asc ? '' : 'icon_check']" style="display: block; margin-top: -5px;"></i>
|
||||
</div>
|
||||
<span>{{ otherInfo.SubjectCode }} </span>
|
||||
<span>({{ otherInfo.TaskBlindName }})</span>
|
||||
</div>
|
||||
|
|
@ -40,8 +45,8 @@
|
|||
<el-card class="box-card right">
|
||||
<div style="width:100%;height: 100%;">
|
||||
<NoneDicomsViewer v-if="previewImage.imgList.length > 0" ref="previewImage" style="width:100%;"
|
||||
:preview-image="previewImage" :value="currentStudyFileIndex" :reading-task-state="readingTaskState"
|
||||
@selectedImg="selectedImg" />
|
||||
:preview-image="previewImage" :value="currentStudyFileIndex" :currentFileId="currentFileId"
|
||||
:reading-task-state="readingTaskState" @selectedImg="selectedImg" />
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
|
|
@ -90,7 +95,8 @@ export default {
|
|||
visistTaskId: '',
|
||||
taskBlindName: '',
|
||||
readingTaskState: 2,
|
||||
BodyPart: {}
|
||||
BodyPart: {},
|
||||
Asc: null
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
|
|
@ -113,6 +119,25 @@ export default {
|
|||
this.getNoneDicomList()
|
||||
},
|
||||
methods: {
|
||||
sortFile() {
|
||||
if (this.Asc) {
|
||||
this.Asc = false
|
||||
} else {
|
||||
this.Asc = true
|
||||
}
|
||||
this.studyList.forEach(study => {
|
||||
if (study.NoneDicomStudyFileList.length > 0) {
|
||||
if (this.Asc) {
|
||||
study.NoneDicomStudyFileList.sort((a, b) => b.FileName.localeCompare(a.FileName))
|
||||
} else {
|
||||
study.NoneDicomStudyFileList.sort((a, b) => a.FileName.localeCompare(b.FileName))
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
this.previewImage.imgList = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList
|
||||
this.previewImage.index = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === this.currentFileId)
|
||||
},
|
||||
// 获取非Dicom检查信息
|
||||
getNoneDicomList() {
|
||||
this.loading = true
|
||||
|
|
@ -148,12 +173,14 @@ export default {
|
|||
this.previewImage.studyId = this.studyList[studyIndex].Id
|
||||
this.$nextTick(() => {
|
||||
if (isChangeSub) {
|
||||
this.$refs['previewImage'].selected(fileIndex)
|
||||
this.$refs['previewImage'].selected(this.currentFileId)
|
||||
}
|
||||
})
|
||||
},
|
||||
selectedImg(fileIndex) {
|
||||
selectedImg(id) {
|
||||
if (this.studyList.length > 0) {
|
||||
let fileIndex = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === id)
|
||||
console.log(fileIndex, id)
|
||||
this.currentStudyFileIndex = fileIndex
|
||||
this.currentFileId = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[fileIndex].Id
|
||||
this.previewImage.index = fileIndex
|
||||
|
|
@ -195,6 +222,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon_check {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
|
@ -236,7 +267,7 @@ export default {
|
|||
}
|
||||
|
||||
.title {
|
||||
height: 40px;
|
||||
// height: 40px;
|
||||
line-height: 40px;
|
||||
border: 1ppx solid;
|
||||
border: 1px solid #ebe7e7;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class="img-container">
|
||||
<el-card v-loading="loading" class="box-card left">
|
||||
<div v-if="isReadingShowSubjectInfo" class="title">
|
||||
<div v-if="isReadingShowSubjectInfo" class="title" style="display: flex;align-items: center;">
|
||||
<div style="margin-right: 5px;cursor: pointer;" @click.stop="sortFile">
|
||||
<i :class="['el-icon-caret-top', Asc ? '' : 'icon_check']" style="display: block;margin-bottom: -5px;"></i>
|
||||
<i :class="['el-icon-caret-bottom', !Asc ? '' : 'icon_check']" style="display: block; margin-top: -5px;"></i>
|
||||
</div>
|
||||
<h4>{{ subjectCode }} </h4>
|
||||
<h4>{{ taskBlindName }}</h4>
|
||||
</div>
|
||||
|
|
@ -179,7 +183,8 @@ export default {
|
|||
otherInfo: null,
|
||||
isReadingShowPreviousResults: false,
|
||||
BodyPart: {},
|
||||
openWindow: null
|
||||
openWindow: null,
|
||||
Asc: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -190,7 +195,6 @@ export default {
|
|||
async mounted() {
|
||||
this.BodyPart.Bodypart = await this.$getBodyPart(this.$route.query.trialId)
|
||||
this.isReadingShowPreviousResults = this.$router.currentRoute.query.isReadingShowPreviousResults !== undefined ? this.$router.currentRoute.query.isReadingShowPreviousResults : true
|
||||
|
||||
this.getNoneDicomList(this.isReadingShowPreviousResults)
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
|
@ -199,6 +203,23 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
sortFile() {
|
||||
if (this.Asc) {
|
||||
this.Asc = false
|
||||
} else {
|
||||
this.Asc = true
|
||||
}
|
||||
this.studyList.forEach(study => {
|
||||
if (study.NoneDicomStudyFileList.length > 0) {
|
||||
if (this.Asc) {
|
||||
study.NoneDicomStudyFileList.sort((a, b) => b.FileName.localeCompare(a.FileName))
|
||||
} else {
|
||||
study.NoneDicomStudyFileList.sort((a, b) => a.FileName.localeCompare(b.FileName))
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取非Dicom检查信息
|
||||
getNoneDicomList() {
|
||||
this.loading = true
|
||||
|
|
@ -327,6 +348,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon_check {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue