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

358 lines
10 KiB
Vue

/* eslint-disable */
<template>
<BaseContainer>
<template slot="search-container">
<el-form :inline="true">
<!-- 受试者编号 -->
<el-form-item :label="$t('trials:downloadMonitor:table:subjectId')">
<el-input
v-model="searchData.SubjectCode"
style="width: 120px"
clearable
/>
</el-form-item>
<!-- IP -->
<el-form-item :label="$t('trials:downloadMonitor:table:IP')">
<el-input v-model="searchData.Ip" style="width: 120px" clearable />
</el-form-item>
<!-- 用户名称 -->
<el-form-item :label="$t('trials:downloadMonitor:table:userName')">
<el-input v-model="searchData.Name" style="width: 120px" clearable />
</el-form-item>
<!-- 用户类型 -->
<el-form-item
class="my_multiple"
:label="$t('trials:downloadMonitor:table:userType')"
>
<el-select
v-model="searchData.UserType"
style="width: 140px"
clearable
>
<el-option
v-for="item of $d.UserType"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<!-- 影像类型 -->
<el-form-item
class="my_multiple"
:label="$t('trials:downloadMonitor:table:imageType')"
>
<el-select
v-model="searchData.ImageType"
style="width: 140px"
clearable
>
<el-option
v-for="item of $d.downloadImageType"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('trials:downloadMonitor:table:downloadTime')">
<el-date-picker
v-model="datetimerange"
type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
:start-placeholder="$t('trials:loginLog:table:beginTime')"
:end-placeholder="$t('trials:loginLog:table:endTime')"
value-format="yyyy-MM-dd HH:mm:ss"
@change="handleDatetimeChange"
/>
</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"
:default-sort="{ prop: 'DownloadStartTime', order: 'descending' }"
>
<el-table-column type="index" width="40" align="left" />
<!-- 受试者编号 -->
<el-table-column
prop="SubjectCode"
min-width="130"
:label="$t('trials:downloadMonitor:table:subjectId')"
show-overflow-tooltip
sortable="custom"
/>
<!-- IP -->
<el-table-column
prop="IP"
min-width="80"
:label="$t('trials:downloadMonitor:table:IP')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 访视名 -->
<el-table-column
prop="VisitName"
min-width="100"
:label="$t('trials:downloadMonitor:table:visitName')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 用户名 -->
<el-table-column
prop="UserName"
min-width="100"
:label="$t('trials:downloadMonitor:table:user')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 用户姓名 -->
<el-table-column
prop="UserFullName"
min-width="100"
:label="$t('trials:downloadMonitor:table:userName')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 用户类型 -->
<el-table-column
prop="VisitName"
min-width="100"
:label="$t('trials:downloadMonitor:table:userType')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
<span>
{{ $fd('UserType', scope.row.UserTypeEnum) }}
</span>
</template>
</el-table-column>
<!-- 检查数量 -->
<el-table-column
prop="VisitName"
min-width="100"
:label="$t('trials:downloadMonitor:table:studyNum')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
<span>{{
scope.row.DicomStudyCount + scope.row.NoneDicomStudyCount
}}</span>
</template>
</el-table-column>
<!-- 影像类型 -->
<el-table-column
prop="ImageType"
min-width="150"
:label="$t('trials:downloadMonitor:table:imageType')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
<el-tag>
{{ $fd('downloadImageType', scope.row.ImageType) }}
</el-tag>
</template>
</el-table-column>
<!-- 下载影像数量 -->
<el-table-column
prop="ImageCount"
min-width="100"
:label="$t('trials:downloadMonitor:table:downloadImageNum')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 下载影像大小 -->
<el-table-column
prop="ImageSize"
min-width="130"
:label="$t('trials:downloadMonitor:table:downloadImageSize')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
{{ fileSizeFormatter(scope.row.ImageSize) }}
</template>
</el-table-column>
<!-- 状态 -->
<el-table-column
prop="IsSuccess"
min-width="100"
:label="$t('trials:downloadMonitor:table:status')"
show-overflow-tooltip
sortable="custom"
>
<template slot-scope="scope">
<el-tag :type="scope.row.IsSuccess ? 'success' : 'danger'">
{{ $fd('downloadIsSuccess', scope.row.IsSuccess) }}
</el-tag>
</template>
</el-table-column>
<!-- 下载开始时间 -->
<el-table-column
prop="DownloadStartTime"
min-width="130"
:label="$t('trials:downloadMonitor:table:downloadStartTime')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 下载结束时间 -->
<el-table-column
prop="DownloadEndTime"
min-width="130"
:label="$t('trials:downloadMonitor:table:downloadEndTime')"
show-overflow-tooltip
sortable="custom"
/>
<!-- 总共用时 -->
<el-table-column
prop="UploadIntervalStr"
min-width="100"
:label="$t('trials:downloadMonitor:table:totalTime')"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.UploadIntervalStr }}
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
class="page"
:total="total"
:page.sync="searchData.PageIndex"
:limit.sync="searchData.PageSize"
@pagination="getList"
/>
</template>
</BaseContainer>
</template>
<script>
import { getTrialDownloadList } from '@/api/load'
import Pagination from '@/components/Pagination'
import BaseContainer from '@/components/BaseContainer'
const searchDataDefault = () => {
return {
SortField: 'DownloadStartTime',
Asc: false,
PageIndex: 1,
PageSize: 20,
TrialId: '',
IsSuccess: null,
StudyCode: null,
DownloadStartTime: null,
DownloadEndTime: null,
Ip: null,
ImageType: null,
UserType: null,
Name: null,
}
}
export default {
components: { BaseContainer, Pagination },
data() {
return {
list: [],
total: 0,
loading: false,
searchData: searchDataDefault(),
datetimerange: [],
}
},
mounted() {
this.getList()
},
methods: {
getList() {
this.loading = true
this.searchData.TrialId = this.$route.query.trialId
getTrialDownloadList(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.datetimerange = []
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()
},
handleDatetimeChange(val) {
if (val) {
this.searchData.DownloadStartTime = val[0]
this.searchData.DownloadEndTime = val[1]
} else {
this.searchData.DownloadStartTime = ''
this.searchData.DownloadEndTime = ''
}
},
},
}
</script>