irc_web/.svn/pristine/25/25102e5274ffd3d78eac5ebba6f...

98 lines
2.2 KiB
Plaintext

<template>
<div class="statistics">
<el-tabs v-model="activeTab" @tab-click="clickTab">
<el-tab-pane
label="Workload Statistics"
name="workLoadStat"
>
<workload-stats v-if="activeTab==='workLoadStat'" />
</el-tab-pane>
<el-tab-pane
label="Reviewer Enrollment Statistics"
name="reviewerEnrollmentsStat"
>
<enrollments-stats-by-Reviewer v-if="activeTab==='reviewerEnrollmentsStat'" />
</el-tab-pane>
<el-tab-pane
label="Trial Enrollment Reviewer"
name="trialEnrollmentsStats"
>
<trial-enrollments-stats v-if="activeTab==='trialEnrollmentsStats'" />
</el-tab-pane>
<el-tab-pane
label="Participates Statistics"
name="participatesStats"
>
<participates-stats v-if="activeTab==='participatesStats'" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import WorkloadStats from './components/WorkloadStats'
// import EnrollmentsStats from './components/EnrollmentsStats'
import EnrollmentsStatsByReviewer from './components/EnrollmentsStatsByReviewer'
import TrialEnrollmentsStats from './components/TrialEnrollmentsStats'
import ParticipatesStats from './components/ParticipatesStats'
export default {
name: 'Statistics',
components: {
WorkloadStats,
// EnrollmentsStats,
EnrollmentsStatsByReviewer,
TrialEnrollmentsStats,
ParticipatesStats
},
data() {
return {
activeTab: 'workLoadStat',
load: {
workLoadStat: true,
reviewerEnrollmentsStat: false,
trialEnrollmentsStats: false,
participatesStats: false
}
}
},
methods: {
clickTab(tab, event) {
if (this.load[tab.name] === false) {
this.load[tab.name] = true
}
}
}
}
</script>
<style lang="scss">
.statistics{
.el-tabs{
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
.el-tabs__header {
height: 40px;
margin-bottom:5px;
}
.el-tabs__content{
flex: 1;
.el-tab-pane{
height: 100%;
}
}
}
.stats-wrapper{
height: 100%;
.page{
text-align: right;
padding-top: 3px;
}
}
}
</style>