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-12-22 13:58:23 +08:00
parent 8122464fbb
commit 6cd5e7b957
9 changed files with 391 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/utils/dcmUpload/dcmjs.js
View File

@ -8509,7 +8509,7 @@
var _writeOptions$fragmen = writeOptions.fragmentMultiframe, var _writeOptions$fragmen = writeOptions.fragmentMultiframe,
fragmentMultiframe = _writeOptions$fragmen === void 0 ? true : _writeOptions$fragmen; fragmentMultiframe = _writeOptions$fragmen === void 0 ? true : _writeOptions$fragmen;
var _writeOptions$offset = writeOptions.startOffset, 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; value = value === null || value === undefined ? [] : value;
if (isEncapsulated) { if (isEncapsulated) {
@ -8537,7 +8537,9 @@
for (i = 0; i < frames; i++) { for (i = 0; i < frames; i++) {
var _needsPadding = Boolean(value[i].byteLength & 1); var _needsPadding = Boolean(value[i].byteLength & 1);
if (startOffset) startOffset.push(binaryStream.size); if (isNeedStartOffset) {
startOffset.push(binaryStream.size);
}
var frameBuffer = value[i], var frameBuffer = value[i],
frameStream = new ReadBufferStream(frameBuffer); frameStream = new ReadBufferStream(frameBuffer);
var fragmentsLength = 1; var fragmentsLength = 1;

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

@ -2,13 +2,8 @@
<template> <template>
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
<transition name="viewer-fade"> <transition name="viewer-fade">
<div <div v-show="urlList.length > 0" ref="image-viewer__wrapper" tabindex="-1" class="image-viewer__wrapper"
v-show="urlList.length > 0" :style="{ 'z-index': 5 }">
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>
@ -21,18 +16,12 @@
</span> </span>
<!-- Arrow --> <!-- Arrow -->
<template v-if="!isSingle"> <template v-if="!isSingle">
<span <span class="image-viewer__btn image-viewer__prev" :class="{ 'is-disabled': !infinite && isFirst }"
class="image-viewer__btn image-viewer__prev" @click="prev">
:class="{ 'is-disabled': !infinite && isFirst }"
@click="prev"
>
<i class="el-icon-arrow-left" /> <i class="el-icon-arrow-left" />
</span> </span>
<span <span class="el-image-viewer__btn el-image-viewer__next" :class="{ 'is-disabled': !infinite && isLast }"
class="el-image-viewer__btn el-image-viewer__next" @click="next">
:class="{ 'is-disabled': !infinite && isLast }"
@click="next"
>
<i class="el-icon-arrow-right" /> <i class="el-icon-arrow-right" />
</span> </span>
</template> </template>
@ -44,36 +33,19 @@
<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 <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" />
class="el-icon-refresh-left" <i class="el-icon-refresh-right" @click="handleActions('clocelise')" />
@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"> <template v-for="(item, i) in urlList">
<img <img v-if="!~item.FileType.indexOf('pdf')" v-show="i === index" :ref="`img${i}`" :key="item.Id"
v-if="!~item.FileType.indexOf('pdf')" crossorigin="anonymous" :src="item.FileType && item.FileType.indexOf('zip') >= 0
v-show="i === index"
:ref="`img${i}`"
:key="item.Id"
crossorigin="anonymous"
:src="
item.FileType && item.FileType.indexOf('zip') >= 0
? zipImg ? zipImg
: `${OSSclientConfig.basePath}${item.Path}` : `${OSSclientConfig.basePath}${item.Path}`
" " :style="imgStyle" style="max-width: 100%; max-height: 100%" @load="handleImgLoad"
:style="imgStyle" @error="handleImgError" @mousedown="handleMouseDown" />
style="max-width: 100%; max-height: 100%"
@load="handleImgLoad"
@error="handleImgError"
@mousedown="handleMouseDown"
/>
</template> </template>
</div> </div>
</div> </div>
@ -172,7 +144,9 @@ export default {
immediate: true, immediate: true,
handler(val) { handler(val) {
this.reset() this.reset()
this.onSwitch(val) if (val >= 0) {
this.onSwitch(this.urlList[val].Id)
}
}, },
}, },
}, },
@ -349,6 +323,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.image-viewer__btn { .image-viewer__btn {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -370,6 +345,7 @@ export default {
height: 40px; height: 40px;
font-size: 40px; font-size: 40px;
} }
.image-viewer_desc { .image-viewer_desc {
position: absolute; position: absolute;
top: 40px; top: 40px;
@ -387,6 +363,7 @@ 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%;
@ -397,6 +374,7 @@ export default {
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;
@ -408,6 +386,7 @@ export default {
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%;
@ -419,6 +398,7 @@ export default {
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
.image-viewer__next, .image-viewer__next,
.image-viewer__prev { .image-viewer__prev {
top: 50%; top: 50%;
@ -429,15 +409,18 @@ export default {
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;
width: 100%; width: 100%;
@ -447,9 +430,11 @@ export default {
opacity: 0.5; opacity: 0.5;
// background:#000 // background:#000
} }
.viewer-fade-enter-active { .viewer-fade-enter-active {
animation: viewer-fade-in 0.3s; animation: viewer-fade-in 0.3s;
} }
.viewer-fade-leave-active { .viewer-fade-leave-active {
animation: viewer-fade-out 0.3s; animation: viewer-fade-out 0.3s;
} }
@ -459,6 +444,7 @@ export default {
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;
@ -470,6 +456,7 @@ export default {
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;

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

@ -2,56 +2,29 @@
<div class="none-dicom_preview-wrapper"> <div class="none-dicom_preview-wrapper">
<div class="image-viewer-wrapper"> <div class="image-viewer-wrapper">
<!-- 预览图像 --> <!-- 预览图像 -->
<ImageViewer <ImageViewer v-if="previewVisible" :on-switch="(index) => {
v-if="previewVisible"
:on-switch="
(index) => {
selected(index) selected(index)
} }
" " :initial-index="previewImage.index" :url-list="previewImage.imgList" :study-code="previewImage.studyCode"
:initial-index="previewImage.index" :body-part="previewImage.bodyPart" :modality="previewImage.modality" :zip-img="zipImg" />
:url-list="previewImage.imgList"
:study-code="previewImage.studyCode"
:body-part="previewImage.bodyPart"
:modality="previewImage.modality"
: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 icon="el-icon-d-arrow-left" plain class="left to" :disabled="disabledPrev" @click="toRight" />
icon="el-icon-d-arrow-left"
plain
class="left to"
:disabled="disabledPrev"
@click="toRight"
/>
<div ref="imagesWrapper" class="images"> <div ref="imagesWrapper" class="images">
<div v-if="noData" class="empty-text"> <div v-if="noData" class="empty-text">
<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"> <template v-for="(item, index) in previewImage.imgList">
<div <div v-if="!~item.FileType.indexOf('pdf')" :key="index" class="item-img" :style="imgSize" :class="{
v-if="!~item.FileType.indexOf('pdf')" 'is-active': item.Id === currentFileId,
:key="index" }" @click="selected(item.Id)">
class="item-img" <img :title="item.FileName" crossorigin="anonymous" :src="item.FileType && item.FileType.indexOf('zip') >= 0
: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 ? zipImg
: `${OSSclientConfig.basePath}${item.Path}` : `${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>
@ -59,13 +32,7 @@
</template> </template>
</div> </div>
</div> </div>
<el-button <el-button icon="el-icon-d-arrow-right" :disabled="disabledNext" plain class="right to" @click="Left" />
icon="el-icon-d-arrow-right"
:disabled="disabledNext"
plain
class="right to"
@click="Left"
/>
</div> </div>
</div> </div>
</div> </div>
@ -93,6 +60,10 @@ export default {
type: Number, type: Number,
default: null, default: null,
}, },
currentFileId: {
type: String,
default: ''
},
previewImage: { previewImage: {
type: Object, type: Object,
default: () => { default: () => {
@ -167,7 +138,7 @@ export default {
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.currentFileId)
} }
}, },
methods: { methods: {
@ -185,7 +156,8 @@ export default {
this.translateX = maxTrans this.translateX = maxTrans
} }
}, },
selected(index) { selected(id) {
let index = this.previewImage.imgList.findIndex(item => item.Id === id)
const center = this.pageSize >> 1 const center = this.pageSize >> 1
// 最后一页的中间位置 // 最后一页的中间位置
const lastCenter = this.dataLength - center const lastCenter = this.dataLength - center
@ -202,7 +174,7 @@ export default {
if (this.currentIndex !== index) { if (this.currentIndex !== index) {
this.currentIndex = index this.currentIndex = index
} }
this.$emit('selectedImg', index) this.$emit('selectedImg', id)
}, },
wrapperWidth() { wrapperWidth() {
if (this.$refs.imagesWrapper) { if (this.$refs.imagesWrapper) {
@ -224,25 +196,30 @@ export default {
.image-viewer-wrapper { .image-viewer-wrapper {
flex: 1; flex: 1;
} }
.thumbnail-wrapper { .thumbnail-wrapper {
height: 130px; height: 130px;
} }
.img-content { .img-content {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 10px; bottom: 10px;
width: 100%; width: 100%;
} }
.img-wrapper { .img-wrapper {
display: flex; display: flex;
position: relative; position: relative;
margin: 0 20px; margin: 0 20px;
height: 120px; height: 120px;
.to { .to {
width: 32px; width: 32px;
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
.images::before { .images::before {
position: absolute; position: absolute;
z-index: 5; z-index: 5;
@ -251,16 +228,15 @@ export default {
width: 84px; width: 84px;
content: ''; content: '';
pointer-events: none; pointer-events: none;
background: -webkit-gradient( background: -webkit-gradient(linear,
linear,
left top, left top,
right top, right top,
from(#fff), from(#fff),
color-stop(50%, rgba(0, 0, 0, 0)) color-stop(50%, rgba(0, 0, 0, 0)));
);
background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%); background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%); background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%);
} }
.images::after { .images::after {
position: absolute; position: absolute;
z-index: 5; z-index: 5;
@ -270,22 +246,22 @@ export default {
width: 84px; width: 84px;
content: ''; content: '';
pointer-events: none; pointer-events: none;
background: -webkit-gradient( background: -webkit-gradient(linear,
linear,
right top, right top,
left top, left top,
from(#fff), from(#fff),
color-stop(50%, rgba(0, 0, 0, 0)) color-stop(50%, rgba(0, 0, 0, 0)));
);
background: -o-linear-gradient(right, #fff, rgba(0, 0, 0, 0) 50%); background: -o-linear-gradient(right, #fff, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(270deg, #fff, rgba(0, 0, 0, 0) 50%); background: linear-gradient(270deg, #fff, rgba(0, 0, 0, 0) 50%);
} }
.images { .images {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 2px; margin: 0 2px;
.empty-text { .empty-text {
color: rgb(158, 158, 158); color: rgb(158, 158, 158);
height: 100%; height: 100%;
@ -293,6 +269,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.items { .items {
position: absolute; position: absolute;
top: 0; top: 0;
@ -302,6 +279,7 @@ export default {
height: 100%; height: 100%;
align-items: center; align-items: center;
transition: transform 0.25s ease; transition: transform 0.25s ease;
.item-img { .item-img {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
@ -309,6 +287,7 @@ export default {
margin-right: 8px; margin-right: 8px;
border: 2px solid rgba(0, 0, 0, 0); border: 2px solid rgba(0, 0, 0, 0);
cursor: pointer; cursor: pointer;
.item-date { .item-date {
bottom: 0px; bottom: 0px;
position: absolute; position: absolute;
@ -319,15 +298,18 @@ export default {
line-height: 24px; line-height: 24px;
color: white; color: white;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.item-img:hover::after { .item-img:hover::after {
// border-color: #409EFF; // border-color: #409EFF;
opacity: 0; opacity: 0;
} }
.item-img::after { .item-img::after {
position: absolute; position: absolute;
top: 0; top: 0;
@ -342,9 +324,11 @@ export default {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
background-color: #fff; background-color: #fff;
} }
.is-active { .is-active {
border-color: #409eff; border-color: #409eff;
} }
.is-active:after { .is-active:after {
opacity: 0; opacity: 0;
} }

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

@ -1,7 +1,11 @@
<template> <template>
<div v-loading="loading" class="img-container"> <div v-loading="loading" class="img-container">
<el-card class="box-card left"> <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') }} {{ $t('trials:none-dicom-show:fileList') }}
</div> </div>
<div class="left-content"> <div class="left-content">
@ -77,7 +81,8 @@
<el-card class="box-card right"> <el-card class="box-card right">
<div style="width: 100%; height: 100%" v-if="!showPDF"> <div style="width: 100%; height: 100%" v-if="!showPDF">
<Preview v-if="previewImage.imgList.length > 0" ref="previewImage" style="width: 100%" <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>
<div style="width: 100%; height: 100%" v-else> <div style="width: 100%; height: 100%" v-else>
<PreviewFile :file-path="pdfFile.path" :file-type="pdfFile.type" /> <PreviewFile :file-path="pdfFile.path" :file-type="pdfFile.type" />
@ -140,6 +145,7 @@ export default {
isAudit: false, isAudit: false,
activeNames: [], activeNames: [],
Asc: false
} }
}, },
async created() { async created() {
@ -157,6 +163,26 @@ export default {
// 默认选择第一个文件 // 默认选择第一个文件
}, },
methods: { 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() { }, handleChange() { },
changeReadingStatus(callback, row, file) { changeReadingStatus(callback, row, file) {
let statusStr = '' let statusStr = ''
@ -321,12 +347,13 @@ export default {
this.previewImage.modality = this.studyList[studyIndex].Modality this.previewImage.modality = this.studyList[studyIndex].Modality
this.$nextTick(() => { this.$nextTick(() => {
if (isChangeSub) { if (isChangeSub) {
this.$refs['previewImage'].selected(fileIndex) this.$refs['previewImage'].selected(this.currentFileId)
} }
}) })
}, },
selectedImg(fileIndex) { selectedImg(id) {
if (this.studyList.length > 0) { if (this.studyList.length > 0) {
let fileIndex = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList.findIndex(item => item.Id === id)
this.currentStudyFileIndex = fileIndex this.currentStudyFileIndex = fileIndex
this.currentFileId = this.currentFileId =
this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[ this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[
@ -354,6 +381,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.icon_check {
color: #409EFF;
}
.img-container { .img-container {
position: relative; position: relative;
width: 100%; width: 100%;

67
src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsCanvas.vue
View File

@ -2,7 +2,8 @@
<template> <template>
<div v-loading="loading" style="width:100%;height:100%;"> <div v-loading="loading" 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>
@ -15,18 +16,12 @@
</span> </span>
<!-- Arrow --> <!-- Arrow -->
<template v-if="!isSingle"> <template v-if="!isSingle">
<span <span class="image-viewer__btn image-viewer__prev" :class="{ 'is-disabled': !infinite && isFirst }"
class="image-viewer__btn image-viewer__prev" @click="prev">
:class="{ 'is-disabled': !infinite && isFirst }"
@click="prev"
>
<i class="el-icon-arrow-left" /> <i class="el-icon-arrow-left" />
</span> </span>
<span <span class="el-image-viewer__btn el-image-viewer__next" :class="{ 'is-disabled': !infinite && isLast }"
class="el-image-viewer__btn el-image-viewer__next" @click="next">
:class="{ 'is-disabled': !infinite && isLast }"
@click="next"
>
<i class="el-icon-arrow-right" /> <i class="el-icon-arrow-right" />
</span> </span>
</template> </template>
@ -40,34 +35,25 @@
<i class="el-image-viewer__actions__divider" /> <i class="el-image-viewer__actions__divider" />
<i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" /> <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" />
<i class="el-icon-refresh-right" @click="handleActions('clocelise')" /> <i class="el-icon-refresh-right" @click="handleActions('clocelise')" />
<i <i v-if="readingTaskState < 2" class="el-icon-bottom-right"
v-if="readingTaskState < 2"
class="el-icon-bottom-right"
:style="{ cursor: isToolDisabled || readingTaskState >= 2 ? 'not-allowed' : 'pointer' }" :style="{ cursor: isToolDisabled || readingTaskState >= 2 ? 'not-allowed' : 'pointer' }"
@click="handleDrawArrow" @click="handleDrawArrow" />
/>
<!-- <i <!-- <i
class="rectangle" class="rectangle"
:style="{cursor:isToolDisabled || readingTaskState >=2 ?'not-allowed':'pointer'}" :style="{cursor:isToolDisabled || readingTaskState >=2 ?'not-allowed':'pointer'}"
@click="handleDrawRectangle" @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> </div>
<!-- 图片 --> <!-- 图片 -->
<div id="image-viewer__canvas" class="image-viewer__canvas"> <div id="image-viewer__canvas" class="image-viewer__canvas">
<canvas <canvas v-if="canvasSize.width && canvasPosition.y" id="canvas" :height="canvasSize.height"
v-if="canvasSize.width && canvasPosition.y" :width="canvasSize.width" :style="imgStyle" @mousedown="handleMouseDown" @mousemove="handleMouseMove"
id="canvas" @mouseup="handleMouseUp" @contextmenu="handleContextmenu" />
:height="canvasSize.height"
:width="canvasSize.width"
:style="imgStyle"
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseup="handleMouseUp"
@contextmenu="handleContextmenu"
/>
</div> </div>
</div> </div>
@ -191,12 +177,16 @@ export default {
immediate: true, immediate: true,
handler(val) { handler(val) {
this.reset() 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.imgUrl = this.urlList[val].Path
this.imgId = this.urlList[val].Id
this.loadImage() this.loadImage()
} }
}
} }
}, },
mounted() { mounted() {
@ -779,7 +769,6 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image-viewer__wrapper { .image-viewer__wrapper {
position: relative; position: relative;
top: 0; top: 0;
@ -789,6 +778,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.image-viewer__btn { .image-viewer__btn {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -810,6 +800,7 @@ export default {
height: 40px; height: 40px;
font-size: 40px font-size: 40px
} }
.image-viewer_desc { .image-viewer_desc {
position: absolute; position: absolute;
top: 40px; top: 40px;
@ -827,6 +818,7 @@ 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%;
@ -837,6 +829,7 @@ export default {
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;
@ -848,6 +841,7 @@ export default {
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%;
@ -859,7 +853,9 @@ export default {
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;
@ -868,15 +864,18 @@ export default {
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;
width: 100%; width: 100%;
@ -887,9 +886,11 @@ export default {
// background:#000 // background:#000
} }
.viewer-fade-enter-active { .viewer-fade-enter-active {
animation: viewer-fade-in .3s animation: viewer-fade-in .3s
} }
.viewer-fade-leave-active { .viewer-fade-leave-active {
animation: viewer-fade-out .3s animation: viewer-fade-out .3s
} }
@ -899,6 +900,7 @@ export default {
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
@ -910,6 +912,7 @@ export default {
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

85
src/views/trials/trials-panel/reading/dicoms/components/NoneDicomsViewer.vue
View File

@ -3,47 +3,25 @@
<div class="image-viewer-wrapper"> <div class="image-viewer-wrapper">
<!-- 预览图像 --> <!-- 预览图像 -->
<NoneDicomsCanvas <NoneDicomsCanvas v-if="previewVisible" :on-switch="(index) => {
v-if="previewVisible"
:on-switch="
(index) => {
selected(index) selected(index)
} }
" " :initial-index="previewImage.index" :url-list="previewImage.imgList" :study-code="previewImage.studyCode"
:initial-index="previewImage.index" :body-part="previewImage.bodyPart" :modality="previewImage.modality" :study-id="previewImage.studyId"
:url-list="previewImage.imgList" :reading-task-state="readingTaskState" />
:study-code="previewImage.studyCode"
:body-part="previewImage.bodyPart"
:modality="previewImage.modality"
:study-id="previewImage.studyId"
:reading-task-state="readingTaskState"
/>
</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 icon="el-icon-d-arrow-left" plain class="left to" :disabled="disabledPrev" @click="toRight" />
icon="el-icon-d-arrow-left"
plain
class="left to"
:disabled="disabledPrev"
@click="toRight"
/>
<div ref="imagesWrapper" class="images"> <div ref="imagesWrapper" class="images">
<div v-if="noData" class="empty-text"> <div v-if="noData" class="empty-text">
<slot name="empty">{{ $t('trial:reading:noneDicoms:noData') }}</slot> <slot name="empty">{{ $t('trial:reading:noneDicoms:noData') }}</slot>
</div> </div>
<div v-show="!noData" class="items" :style="itemsStyle"> <div v-show="!noData" class="items" :style="itemsStyle">
<div <div v-for="(item, index) in previewImage.imgList" :key="index" class="item-img" :style="imgSize" :class="{
v-for="(item, index) in previewImage.imgList" 'is-active': item.Id === currentFileId
:key="index" }" @click="selected(item.Id)">
class="item-img"
:style="imgSize"
:class="{
'is-active': index === currentIndex
}"
@click="selected(index)"
>
<img :title="item.FileName" :src="`${OSSclientConfig.basePath + item.Path}`" crossorigin="anonymous"> <img :title="item.FileName" :src="`${OSSclientConfig.basePath + item.Path}`" crossorigin="anonymous">
<p v-if="item.FileName" class="item-date"> <p v-if="item.FileName" class="item-date">
{{ `${index + 1}` }} {{ `${index + 1}` }}
@ -51,13 +29,7 @@
</div> </div>
</div> </div>
</div> </div>
<el-button <el-button icon="el-icon-d-arrow-right" :disabled="disabledNext" plain class="right to" @click="Left" />
icon="el-icon-d-arrow-right"
:disabled="disabledNext"
plain
class="right to"
@click="Left"
/>
</div> </div>
</div> </div>
</div> </div>
@ -88,6 +60,10 @@ export default {
type: Number, type: Number,
default: null default: null
}, },
currentFileId: {
type: String,
default: ''
},
previewImage: { previewImage: {
type: Object, type: Object,
default: () => { default: () => {
@ -163,7 +139,7 @@ export default {
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.currentFileId)
} }
}, },
methods: { methods: {
@ -181,7 +157,8 @@ export default {
this.translateX = maxTrans this.translateX = maxTrans
} }
}, },
selected(index) { selected(id) {
let index = this.previewImage.imgList.findIndex(item => item.Id === id)
const center = this.pageSize >> 1 const center = this.pageSize >> 1
// 最后一页的中间位置 // 最后一页的中间位置
const lastCenter = this.dataLength - center const lastCenter = this.dataLength - center
@ -198,7 +175,7 @@ export default {
if (this.currentIndex !== index) { if (this.currentIndex !== index) {
this.currentIndex = index this.currentIndex = index
} }
this.$emit('selectedImg', index) this.$emit('selectedImg', id)
}, },
wrapperWidth() { wrapperWidth() {
if (this.$refs.imagesWrapper) { if (this.$refs.imagesWrapper) {
@ -222,25 +199,30 @@ export default {
.image-viewer-wrapper { .image-viewer-wrapper {
flex: 1; flex: 1;
} }
.thumbnail-wrapper { .thumbnail-wrapper {
height: 130px; height: 130px;
} }
.img-content { .img-content {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 10px; bottom: 10px;
width: 100%; width: 100%;
} }
.img-wrapper { .img-wrapper {
display: flex; display: flex;
position: relative; position: relative;
margin: 0 20px; margin: 0 20px;
height: 120px; height: 120px;
.to { .to {
width: 32px; width: 32px;
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
.images::before { .images::before {
position: absolute; position: absolute;
z-index: 5; z-index: 5;
@ -249,16 +231,15 @@ export default {
width: 84px; width: 84px;
content: ''; content: '';
pointer-events: none; pointer-events: none;
background: -webkit-gradient( background: -webkit-gradient(linear,
linear,
left top, left top,
right top, right top,
from(#fff), from(#fff),
color-stop(50%, rgba(0, 0, 0, 0)) color-stop(50%, rgba(0, 0, 0, 0)));
);
background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%); background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%); background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%);
} }
.images::after { .images::after {
position: absolute; position: absolute;
z-index: 5; z-index: 5;
@ -268,22 +249,22 @@ export default {
width: 84px; width: 84px;
content: ''; content: '';
pointer-events: none; pointer-events: none;
background: -webkit-gradient( background: -webkit-gradient(linear,
linear,
right top, right top,
left top, left top,
from(#fff), from(#fff),
color-stop(50%, rgba(0, 0, 0, 0)) color-stop(50%, rgba(0, 0, 0, 0)));
);
background: -o-linear-gradient(right, #fff, rgba(0, 0, 0, 0) 50%); background: -o-linear-gradient(right, #fff, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(270deg, #fff, rgba(0, 0, 0, 0) 50%); background: linear-gradient(270deg, #fff, rgba(0, 0, 0, 0) 50%);
} }
.images { .images {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 2px; margin: 0 2px;
.empty-text { .empty-text {
color: rgb(158, 158, 158); color: rgb(158, 158, 158);
height: 100%; height: 100%;
@ -291,6 +272,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.items { .items {
position: absolute; position: absolute;
top: 0; top: 0;
@ -300,6 +282,7 @@ export default {
height: 100%; height: 100%;
align-items: center; align-items: center;
transition: transform 0.25s ease; transition: transform 0.25s ease;
.item-img { .item-img {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
@ -307,6 +290,7 @@ export default {
margin-right: 8px; margin-right: 8px;
border: 2px solid rgba(0, 0, 0, 0); border: 2px solid rgba(0, 0, 0, 0);
cursor: pointer; cursor: pointer;
.item-date { .item-date {
bottom: 0px; bottom: 0px;
position: absolute; position: absolute;
@ -317,15 +301,18 @@ export default {
line-height: 24px; line-height: 24px;
color: white; color: white;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.item-img:hover::after { .item-img:hover::after {
// border-color: #409EFF; // border-color: #409EFF;
opacity: 0; opacity: 0;
} }
.item-img::after { .item-img::after {
position: absolute; position: absolute;
top: 0; top: 0;
@ -340,9 +327,11 @@ export default {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
background-color: #fff; background-color: #fff;
} }
.is-active { .is-active {
border-color: #409eff; border-color: #409eff;
} }
.is-active:after { .is-active:after {
opacity: 0; opacity: 0;
} }

2
src/views/trials/trials-panel/reading/dicoms/index.vue
View File

@ -349,7 +349,7 @@ export default {
this.dialogVisible = true this.dialogVisible = true
this.cdVisitTaskId = this.visitTaskId 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.isFullscreen = false
this.dialogBodyPartVisible = true this.dialogBodyPartVisible = true
} }

45
src/views/trials/trials-panel/reading/dicoms/none-dicoms.vue
View File

@ -1,7 +1,12 @@
<template> <template>
<div v-loading="loading" class="img-container"> <div v-loading="loading" class="img-container">
<el-card class="box-card left"> <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.SubjectCode }} </span>
<span>({{ otherInfo.TaskBlindName }})</span> <span>({{ otherInfo.TaskBlindName }})</span>
</div> </div>
@ -40,8 +45,8 @@
<el-card class="box-card right"> <el-card class="box-card right">
<div style="width:100%;height: 100%;"> <div style="width:100%;height: 100%;">
<NoneDicomsViewer v-if="previewImage.imgList.length > 0" ref="previewImage" style="width:100%;" <NoneDicomsViewer v-if="previewImage.imgList.length > 0" ref="previewImage" style="width:100%;"
:preview-image="previewImage" :value="currentStudyFileIndex" :reading-task-state="readingTaskState" :preview-image="previewImage" :value="currentStudyFileIndex" :currentFileId="currentFileId"
@selectedImg="selectedImg" /> :reading-task-state="readingTaskState" @selectedImg="selectedImg" />
</div> </div>
</el-card> </el-card>
@ -90,7 +95,8 @@ export default {
visistTaskId: '', visistTaskId: '',
taskBlindName: '', taskBlindName: '',
readingTaskState: 2, readingTaskState: 2,
BodyPart: {} BodyPart: {},
Asc: null
} }
}, },
async mounted() { async mounted() {
@ -113,6 +119,25 @@ export default {
this.getNoneDicomList() this.getNoneDicomList()
}, },
methods: { 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检查信息 // 获取非Dicom检查信息
getNoneDicomList() { getNoneDicomList() {
this.loading = true this.loading = true
@ -148,12 +173,14 @@ export default {
this.previewImage.studyId = this.studyList[studyIndex].Id this.previewImage.studyId = this.studyList[studyIndex].Id
this.$nextTick(() => { this.$nextTick(() => {
if (isChangeSub) { if (isChangeSub) {
this.$refs['previewImage'].selected(fileIndex) this.$refs['previewImage'].selected(this.currentFileId)
} }
}) })
}, },
selectedImg(fileIndex) { selectedImg(id) {
if (this.studyList.length > 0) { 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.currentStudyFileIndex = fileIndex
this.currentFileId = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[fileIndex].Id this.currentFileId = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[fileIndex].Id
this.previewImage.index = fileIndex this.previewImage.index = fileIndex
@ -195,6 +222,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.icon_check {
color: #409EFF;
}
.img-container { .img-container {
flex: 1; flex: 1;
width: 100%; width: 100%;
@ -236,7 +267,7 @@ export default {
} }
.title { .title {
height: 40px; // height: 40px;
line-height: 40px; line-height: 40px;
border: 1ppx solid; border: 1ppx solid;
border: 1px solid #ebe7e7; border: 1px solid #ebe7e7;

31
src/views/trials/trials-panel/reading/none-dicoms/components/VisitReview.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<div class="img-container"> <div class="img-container">
<el-card v-loading="loading" class="box-card left"> <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>{{ subjectCode }} </h4>
<h4>{{ taskBlindName }}</h4> <h4>{{ taskBlindName }}</h4>
</div> </div>
@ -179,7 +183,8 @@ export default {
otherInfo: null, otherInfo: null,
isReadingShowPreviousResults: false, isReadingShowPreviousResults: false,
BodyPart: {}, BodyPart: {},
openWindow: null openWindow: null,
Asc: null
} }
}, },
computed: { computed: {
@ -190,7 +195,6 @@ export default {
async mounted() { async mounted() {
this.BodyPart.Bodypart = await this.$getBodyPart(this.$route.query.trialId) 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.isReadingShowPreviousResults = this.$router.currentRoute.query.isReadingShowPreviousResults !== undefined ? this.$router.currentRoute.query.isReadingShowPreviousResults : true
this.getNoneDicomList(this.isReadingShowPreviousResults) this.getNoneDicomList(this.isReadingShowPreviousResults)
}, },
beforeDestroy() { beforeDestroy() {
@ -199,6 +203,23 @@ export default {
} }
}, },
methods: { 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检查信息 // 获取非Dicom检查信息
getNoneDicomList() { getNoneDicomList() {
this.loading = true this.loading = true
@ -327,6 +348,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.icon_check {
color: #409EFF;
}
.img-container { .img-container {
flex: 1; flex: 1;
width: 100%; width: 100%;