393 lines
13 KiB
Vue
393 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<div class="top">
|
|
<span>{{ $t('upload:dicom:title') }}</span>
|
|
<div class="btnBox">
|
|
<el-button type="primary" size="mini">
|
|
{{ $t('upload:dicom:button:upload') }}
|
|
</el-button>
|
|
<el-button size="mini">
|
|
{{ $t('upload:dicom:button:preview') }}
|
|
</el-button>
|
|
<el-button size="mini">
|
|
{{ $t('upload:dicom:button:delete') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<!--检查列表-->
|
|
<el-table
|
|
:data="list"
|
|
style="width: 100%"
|
|
max-height="250"
|
|
:loading="loading"
|
|
>
|
|
<!--检查类型-->
|
|
<el-table-column
|
|
prop="SubjectCode"
|
|
:label="$t('upload:dicom:table:modality')"
|
|
/>
|
|
<!--检查部位-->
|
|
<el-table-column
|
|
prop="TaskBlindName"
|
|
:label="$t('upload:dicom:table:bodyPart')"
|
|
/>
|
|
<!--序列数量-->
|
|
<el-table-column
|
|
prop="OrginalStudyList"
|
|
:label="$t('upload:dicom:table:seriesCount')"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="
|
|
scope.row.OrginalStudyList &&
|
|
scope.row.OrginalStudyList.length >= 1
|
|
"
|
|
type="text"
|
|
@click="handleOpenDialog(scope.row, 'OrginalStudyList')"
|
|
>
|
|
<span>{{ scope.row.OrginalStudyList.length }}</span>
|
|
</el-button>
|
|
<span v-else>0</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!--图象数-->
|
|
<el-table-column
|
|
prop="TaskBlindName"
|
|
:label="$t('upload:dicom:table:instanceCount')"
|
|
/>
|
|
<!--后处理序列数-->
|
|
<el-table-column
|
|
prop="TaskBlindName"
|
|
:label="$t('upload:dicom:table:uploadSeriesCount')"
|
|
/>
|
|
<!--后处理图像数-->
|
|
<el-table-column
|
|
prop="TaskBlindName"
|
|
:label="$t('upload:dicom:table:uploadInstanceCount')"
|
|
/>
|
|
<el-table-column
|
|
:label="$t('common:action:action')"
|
|
fixed="right"
|
|
width="140"
|
|
>
|
|
<template slot-scope="scope">
|
|
<!--预览--->
|
|
<el-button
|
|
v-if="isUpload"
|
|
circle
|
|
icon="el-icon-delete"
|
|
:title="$t('upload:dicom:button:preview')"
|
|
/>
|
|
<!--删除--->
|
|
<el-button
|
|
v-if="isUpload"
|
|
circle
|
|
icon="el-icon-delete"
|
|
:title="$t('upload:dicom:button:delete')"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="top"></div>
|
|
<!--上传列表-->
|
|
<el-table
|
|
ref="dicomFilesTable"
|
|
v-adaptive="{ bottomOffset: 85 }"
|
|
height="100"
|
|
:data="uploadQueues"
|
|
:row-key="(row) => row.studyIndex"
|
|
class="dicomFiles-table"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
width="55"
|
|
:selectable="handleSelectable"
|
|
/>
|
|
<el-table-column type="index" width="40" />
|
|
<el-table-column min-width="200" show-overflow-tooltip>
|
|
<template slot="header">
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
{{ $t('trials:uploadDicomList:table:studyDetail1') }}<br />
|
|
{{ $t('trials:uploadDicomList:table:studyDetail2') }}<br />
|
|
{{ $t('trials:uploadedDicoms:table:studyDate') }}
|
|
</div>
|
|
<span>{{ $t('trials:uploadDicomList:table:studyInfo') }}</span>
|
|
</el-tooltip>
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<div style="line-height: 15px">
|
|
<div>
|
|
<div>
|
|
<span v-if="scope.row.dicomInfo.accNumber"
|
|
><span style="font-weight: 500">Acc:</span>
|
|
{{ scope.row.dicomInfo.accNumber }}</span
|
|
>
|
|
<span v-else style="color: #f44336">N/A</span>
|
|
</div>
|
|
<div style="display: inline-block; margin-right: 2px">
|
|
<span v-if="scope.row.dicomInfo.modality.length > 0">
|
|
{{ scope.row.dicomInfo.modality.join('、') }},</span
|
|
>
|
|
<span v-else style="color: #f44336">N/A,</span>
|
|
</div>
|
|
<div style="display: inline-block; margin-right: 2px">
|
|
<span v-if="scope.row.seriesList.length"
|
|
>{{ scope.row.seriesList.length }} Series,</span
|
|
>
|
|
<span v-else style="color: #f44336">N/A,</span>
|
|
</div>
|
|
<div style="display: inline-block">
|
|
<span v-if="scope.row.fileList.length"
|
|
>{{ scope.row.fileList.length }} Instances</span
|
|
>
|
|
<span v-else style="color: #f44336">N/A</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style="display: inline-block; margin-right: 2px">
|
|
<span v-if="scope.row.dicomInfo.bodyPart">
|
|
{{ scope.row.dicomInfo.bodyPart }},
|
|
</span>
|
|
<span v-else style="color: #f44336">N/A, </span>
|
|
</div>
|
|
<div style="display: inline-block">
|
|
<span v-if="scope.row.dicomInfo.description">
|
|
{{ scope.row.dicomInfo.description }}</span
|
|
>
|
|
<span v-else style="color: #f44336">N/A</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{{ scope.row.dicomInfo.studyTime }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="130" show-overflow-tooltip>
|
|
<template slot="header">
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
{{ $t('trials:uploadDicomList:table:pId') }}<br />
|
|
{{ $t('trials:uploadDicomList:table:patientName') }}<br />
|
|
{{ $t('trials:uploadDicomList:table:pInfo') }}
|
|
</div>
|
|
<span>{{ $t('trials:uploadDicomList:table:patientInfo') }}</span>
|
|
</el-tooltip>
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<div style="line-height: 15px">
|
|
<div>
|
|
<span v-if="scope.row.dicomInfo.patientId"
|
|
><span style="font-weight: 500">PID: </span
|
|
>{{ scope.row.dicomInfo.patientId }}</span
|
|
>
|
|
<span v-else style="color: #f44336">N/A</span>
|
|
</div>
|
|
<div>
|
|
<span
|
|
:class="[scope.row.dicomInfo.patientName ? '' : 'colorOfRed']"
|
|
>
|
|
{{
|
|
scope.row.dicomInfo.patientName
|
|
? scope.row.dicomInfo.patientName
|
|
: 'N/A'
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span
|
|
:class="[scope.row.dicomInfo.patientSex ? '' : 'colorOfRed']"
|
|
>
|
|
{{
|
|
scope.row.dicomInfo.patientSex
|
|
? scope.row.dicomInfo.patientSex
|
|
: 'N/A'
|
|
}},
|
|
</span>
|
|
|
|
<span
|
|
:class="[scope.row.dicomInfo.patientAge ? '' : 'colorOfRed']"
|
|
>
|
|
{{
|
|
scope.row.dicomInfo.patientAge
|
|
? scope.row.dicomInfo.patientAge
|
|
: 'N/A'
|
|
}},
|
|
</span>
|
|
|
|
<span
|
|
:class="[
|
|
scope.row.dicomInfo.patientBirthDate ? '' : 'colorOfRed',
|
|
]"
|
|
>
|
|
{{
|
|
scope.row.dicomInfo.patientBirthDate
|
|
? scope.row.dicomInfo.patientBirthDate
|
|
: 'N/A'
|
|
}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('trials:uploadDicomList:table:failedFileCount')"
|
|
min-width="150"
|
|
show-overflow-tooltip
|
|
>
|
|
<!--:percentage="
|
|
(scope.row.dicomInfo.failedFileCount * 100) /
|
|
scope.row.dicomInfo.fileCount
|
|
"
|
|
:show-text="false"--->
|
|
<template slot-scope="scope">
|
|
<el-progress
|
|
color="#409eff"
|
|
:percentage="
|
|
(
|
|
(scope.row.dicomInfo.uploadFileSize * 100) /
|
|
scope.row.dicomInfo.fileSize
|
|
).toFixed(2) * 1
|
|
"
|
|
/>
|
|
<span>
|
|
{{ $t('trials:uploadDicomList:table:uploadNow')
|
|
}}{{ scope.row.dicomInfo.failedFileCount }} /
|
|
{{ scope.row.dicomInfo.fileCount }}:[{{
|
|
(scope.row.dicomInfo.uploadFileSize / 1024 / 1024).toFixed(2)
|
|
}}MB/{{
|
|
(scope.row.dicomInfo.fileSize / 1024 / 1024).toFixed(2)
|
|
}}MB]
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
:label="$t('trials:uploadDicomList:table:status')"
|
|
min-width="140"
|
|
show-overflow-tooltip
|
|
>
|
|
<template slot-scope="scope">
|
|
<span
|
|
v-if="
|
|
!scope.row.dicomInfo.failedFileCount &&
|
|
!scope.row.dicomInfo.isInit
|
|
"
|
|
>
|
|
{{ $t('trials:uploadDicomList:table:status1') }}</span
|
|
>
|
|
<span
|
|
style="color: #409eff"
|
|
v-else-if="
|
|
!scope.row.dicomInfo.failedFileCount &&
|
|
scope.row.dicomInfo.isInit &&
|
|
btnLoading
|
|
"
|
|
>{{ $t('trials:uploadDicomList:table:status2') }}</span
|
|
>
|
|
<span
|
|
style="color: #409eff"
|
|
v-else-if="
|
|
scope.row.dicomInfo.failedFileCount <
|
|
scope.row.dicomInfo.fileCount && !scope.row.uploadState.record
|
|
"
|
|
>{{ $t('trials:uploadDicomList:table:status2') }}</span
|
|
>
|
|
<span
|
|
style="color: #2cc368"
|
|
v-else-if="
|
|
scope.row.dicomInfo.failedFileCount ===
|
|
scope.row.dicomInfo.fileCount
|
|
"
|
|
>{{ $t('trials:uploadDicomList:table:status3') }}</span
|
|
>
|
|
<span
|
|
style="color: #f66"
|
|
v-else-if="
|
|
scope.row.uploadState.record &&
|
|
scope.row.uploadState.record.fileCount === 0
|
|
"
|
|
>{{ $t('trials:uploadDicomList:table:status5') }}</span
|
|
>
|
|
<span style="color: #f66" v-else>{{
|
|
$t('trials:uploadDicomList:table:Failed')
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('trials:uploadDicomList:table:record')"
|
|
min-width="140"
|
|
show-overflow-tooltip
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-tooltip placement="top" v-if="scope.row.uploadState.record">
|
|
<div slot="content">
|
|
<div style="max-height: 500px; overflow-y: auto">
|
|
{{ $t('trials:uploadDicomList:table:Existed') }}:
|
|
<div v-if="scope.row.uploadState.record.Existed.length">
|
|
<div
|
|
v-for="item of scope.row.uploadState.record.Existed"
|
|
:key="item"
|
|
style="font-size: 12px; color: #baa72a"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div v-else> </div>
|
|
{{ $t('trials:uploadDicomList:table:Uploaded') }}:
|
|
<div v-if="scope.row.uploadState.record.Uploaded.length">
|
|
<div
|
|
v-for="item of scope.row.uploadState.record.Uploaded"
|
|
:key="item"
|
|
style="font-size: 12px; color: #24b837"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div v-else> </div>
|
|
<br />
|
|
{{ $t('trials:uploadDicomList:table:Failed') }}:
|
|
<div v-if="scope.row.uploadState.record.Failed.length">
|
|
<div
|
|
v-for="item of scope.row.uploadState.record.Failed"
|
|
:key="item"
|
|
style="font-size: 12px; color: #f66"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div v-else> </div>
|
|
</div>
|
|
</div>
|
|
<el-button size="mini" style="cursor: pointer">
|
|
<span style="font-size: 12px; color: #baa72a">{{
|
|
scope.row.uploadState.record.Existed.length
|
|
}}</span>
|
|
/
|
|
<span style="font-size: 12px; color: #24b837">{{
|
|
scope.row.uploadState.record.Uploaded.length
|
|
}}</span>
|
|
/
|
|
<span style="font-size: 12px; color: #f66">{{
|
|
scope.row.uploadState.record.Failed.length
|
|
}}</span>
|
|
</el-button>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
</style> |