irc_web/src/views/trials/trials-panel/trial-summary/upload-monitor/index.vue

435 lines
14 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/* eslint-disable */
<template>
<BaseContainer>
<template slot="search-container">
<el-form :inline="true">
<!-- 中心编号 -->
<el-form-item :label="$t('trials:uploadMonitor:table:siteId')">
<el-select v-model="searchData.SiteId" clearable filterable style="width:120px;">
<el-option
v-for="(item,index) of siteOptions"
:key="index"
:label="item.TrialSiteCode"
:value="item.SiteId"
/>
</el-select>
</el-form-item>
<!-- 受试者编号 -->
<el-form-item :label="$t('trials:uploadMonitor:table:subjectId')">
<el-input
v-model="searchData.SubjectInfo"
style="width:120px;"
clearable
/>
</el-form-item>
<!-- 访视名称 -->
<el-form-item class="my_multiple" :label="$t('trials:uploadMonitor:table:visitName')">
<el-select
v-model="searchData.VisitPlanArray"
style="width:140px"
clearable
multiple
>
<el-option
v-for="(item, index) of visitPlanOptions"
:key="index"
:label="item.VisitName"
:value="item.VisitNum"
>
<span style="float: left">{{ item.VisitName }}</span>
</el-option>
<el-option
key="Other"
label="Out of Plan"
value="1.11"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('trials:uploadMonitor:table:imageType')">
<el-select v-model="searchData.IsDicom" style="width:120px" clearable>
<el-option v-for="item of $d.IsDicom" :label="item.label" :value="item.value" :key="`RoleName${item.value}`"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('trials:uploadMonitor:table:uploader')">
<el-input
v-model="searchData.Uploader"
style="width:120px;"
clearable
/>
</el-form-item>
<el-form-item :label="$t('trials:uploadMonitor:table:uploadStatus')">
<el-select v-model="searchData.IsSuccess" style="width:120px" clearable>
<el-option v-for="item of $d.YesOrNo" :label="item.label" :value="item.value" :key="`RoleName${item.value}`"/>
</el-select>
</el-form-item>
<el-form-item>
<!-- 查询 -->
<el-button type="primary" icon="el-icon-search" @click="handleSearch">
{{ $t('common:button:search') }}
</el-button>
<!-- 重置 -->
<el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
{{ $t('common:button:reset') }}
</el-button>
<!--导出-->
<el-button type="primary" icon="el-icon-download" @click="handleExport">
{{ $t('common:button:export') }}
</el-button>
</el-form-item>
</el-form>
</template>
<template slot="main-container">
<el-table
v-adaptive="{bottomOffset:60}"
v-loading="loading"
:data="list"
stripe
height="100"
@sort-change="handleSortByColumn"
>
<el-table-column type="index" width="40" align="left" />
<!-- 中心编号 -->
<el-table-column
prop="TrialSiteCode"
min-width="100"
:label="$t('trials:uploadMonitor:table:siteId')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 受试者编号 -->
<el-table-column
prop="SubjectCode"
min-width="130"
:label="$t('trials:uploadMonitor:table:subjectId')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 访视名 -->
<el-table-column
prop="VisitName"
min-width="130"
:label="$t('trials:uploadMonitor:table:visitName')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 检查编号 -->
<el-table-column
prop="StudyCode"
min-width="130"
:label="$t('trials:uploadMonitor:table:studyId')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 影像类型 -->
<el-table-column
prop="IsDicom"
min-width="130"
:label="$t('trials:uploadMonitor:table:imageType')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{$fd('IsDicom', scope.row.IsDicom)}}
</template>
</el-table-column>
<!-- 上传人 -->
<el-table-column
prop="Uploader"
min-width="130"
:label="$t('trials:uploadMonitor:table:uploader')"
show-overflow-tooltip
sortable="custom"
/>
<!-- IP -->
<el-table-column
prop="IP"
min-width="100"
:label="$t('trials:uploadMonitor:table:ip')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 开始时间 -->
<el-table-column
prop="UploadStartTime"
min-width="140"
:label="$t('trials:uploadMonitor:table:beginTime')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{scope.row.UploadStartTimeStr}}
</template>
</el-table-column>
<!-- 结束时间 -->
<el-table-column
prop="ArchiveFinishedTime"
min-width="140"
:label="$t('trials:uploadMonitor:table:endTime')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{scope.row.ArchiveFinishedTime}}
</template>
</el-table-column>
<!-- 上传用时 -->
<el-table-column
prop="UploadIntervalStr"
min-width="120"
:label="$t('trials:uploadMonitor:table:uploadInterval')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{scope.row.UploadIntervalStr}}
</template>
</el-table-column>
<!-- 归档用时 -->
<el-table-column
prop="ArchiveIntervalStr"
min-width="120"
:label="$t('trials:uploadMonitor:table:archiveInterval')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{scope.row.ArchiveIntervalStr}}
</template>
</el-table-column>
<!-- 总共用时 -->
<el-table-column
prop="TotalMillisecondsInterval"
min-width="100"
:label="$t('trials:uploadMonitor:table:totalTime')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{scope.row.TimeInterval}}
</template>
</el-table-column>
<!-- 文件数 -->
<el-table-column
prop="FileCount"
min-width="120"
:label="$t('trials:uploadMonitor:table:fileCount')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 文件大小 -->
<el-table-column
prop="FileSize"
min-width="130"
:label="$t('trials:uploadMonitor:table:fileSize')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{fileSizeFormatter(scope.row.FileSize)}}
</template>
</el-table-column>
<!-- 是否有重复文件 -->
<el-table-column
prop="IsDicomReUpload"
min-width="140"
:label="$t('trials:uploadMonitor:table:isRepetition')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.IsDicomReUpload) }}
</template>
</el-table-column>
<!-- 是否上传成功 -->
<el-table-column
prop="IsSuccess"
min-width="150"
:label="$t('trials:uploadMonitor:table:uploadStatus')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.IsSuccess" type="primary"> {{ $fd('YesOrNo', scope.row.IsSuccess) }}</el-tag>
<el-tag v-else type="danger"> {{ $fd('YesOrNo', scope.row.IsSuccess) }}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="Note"
min-width="110"
:label="$t('trials:uploadMonitor:table:remark')"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
:label="$t('common:action:action')"
width="250"
fixed="right"
>
<template slot-scope="scope">
<!-- 查看 -->
<el-button
circle
:title="$t('trials:readTask:button:view')"
:disabled="!scope.row.RecordPath"
icon="el-icon-view"
@click="handleLook(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
</template>
<el-dialog
v-if="lookVisible"
:title="$t('trials:uploadMonitor:dagTitle:look')"
:visible.sync="lookVisible"
width="800px"
append-to-body
:close-on-click-modal="false"
custom-class="base-dialog-wrapper"
>
<div style="max-height: 500px;overflow-y: auto;padding: 0 20px">
<div style="display: flex;justify-content: space-around;margin-bottom: 20px">
<span>{{$t('trials:uploadDicomList:table:FailedNumber')}}: {{lookText.Failed.length}}</span>
<span>{{$t('trials:uploadDicomList:table:ExistedNumber')}}: {{lookText.Existed.length}}</span>
<span>{{$t('trials:uploadDicomList:table:UploadedNumber')}}: {{lookText.Uploaded.length}}</span>
</div>
<div style="margin-bottom: 10px;font-size:12px">
<div style="font-size: 14px;margin-bottom: 5px">{{$t('trials:uploadDicomList:table:Failed')}}</div>
<div v-if="lookText.Failed.length">
<div v-for="item of lookText.Failed">{{item}}</div>
</div>
<div v-else>无</div>
</div>
<div style="margin-bottom: 10px;font-size:12px">
<div style="font-size: 14px;margin-bottom: 5px">{{$t('trials:uploadDicomList:table:Existed')}}</div>
<div v-if="lookText.Existed.length">
<div v-for="item of lookText.Existed">{{item}}</div>
</div>
<div v-else>无</div>
</div>
<div style="margin-bottom: 10px;font-size:12px">
<div style="font-size: 14px;margin-bottom: 5px">{{$t('trials:uploadDicomList:table:Uploaded')}}</div>
<div v-if="lookText.Uploaded.length">
<div v-for="item of lookText.Uploaded">{{item}}</div>
</div>
<div v-else>无</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<!-- 取消 -->
<el-button size="small" type="primary" @click="lookVisible = false">
{{ $t('common:button:cancel') }}
</el-button>
</div>
</el-dialog>
</BaseContainer>
</template>
<script>
import {getDicomAndNoneDicomStudyMonitorList,getTrialSiteSelect,getTrialVisitStageSelect} from '@/api/trials'
import { getStudyUploadMonitor_Export } from '@/api/export'
import Pagination from '@/components/Pagination'
import BaseContainer from '@/components/BaseContainer'
import BaseModel from '@/components/BaseModel'
import axios from "axios";
const searchDataDefault = () => {
return {
SortField: '',
Asc: false,
PageIndex: 1,
PageSize: 20,
TrialId:'',
SiteId:'',
SubjectId:'',
SubjectVisitId:'',
SubjectInfo:'',
VisitPlanArray: [],
IsDicom: null,
Uploader: null,
IsSuccess: null
}
}
export default {
components: { BaseContainer, Pagination, BaseModel },
data() {
return {
list: [],
total: 0,
loading: false,
searchData: searchDataDefault(),
trialId: this.$route.query.trialId,
siteOptions:[],
visitPlanOptions:[],
lookVisible: false,
lookText: null
}
},
mounted() {
this.getSite()
this.getList()
this.getVisitPlanOptions()
},
methods: {
async handleLook(row) {
this.lookVisible = true
var htmlUrl = this.OSSclientConfig.basePath + row.RecordPath
var res = await axios.get(htmlUrl)
console.log(res.data)
this.lookText = res.data
},
getList() {
this.loading = true
this.searchData.TrialId = this.trialId
getDicomAndNoneDicomStudyMonitorList(this.searchData).then((res) => {
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
this.loading = false
}).catch(() => {
this.loading = false
})
},
// 获取site下拉框数据
getSite() {
getTrialSiteSelect(this.trialId).then(res => {
this.siteOptions = res.Result
})
},
// 获取访视下拉框数据
getVisitPlanOptions() {
getTrialVisitStageSelect(this.trialId)
.then((res) => {
this.visitPlanOptions = res.Result
})
},
fileSizeFormatter(size){
if(!size) return
return (size / Math.pow(1024, 2)).toFixed(3) + "M"
},
handleReset() {
this.searchData = searchDataDefault()
this.getList()
},
handleSearch() {
this.searchData.PageIndex = 1
this.getList()
},
// 排序
handleSortByColumn(column) {
if (column.order === 'ascending') {
this.searchData.Asc = true
} else {
this.searchData.Asc = false
}
this.searchData.SortField = column.prop
this.getList()
},
handleExport() {
getStudyUploadMonitor_Export(this.searchData).then(res => {
}).catch(() => {})
},
}
}
</script>