学习统计
This commit is contained in:
yanran200730
@@ -1,48 +1,144 @@
|
|||||||
<template>
|
<template>
|
||||||
<ai-list class="notice">
|
<ai-list class="AppLearningStatistics">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<ai-title title="学习统计" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance"></ai-title>
|
<ai-title title="学习统计" isShowBottomBorder></ai-title>
|
||||||
</template>
|
</template>
|
||||||
<template slot="content">
|
<template slot="content">
|
||||||
<ai-search-bar class="search-bar">
|
<ai-card title="关键数据">
|
||||||
<template #left>
|
|
||||||
</template>
|
|
||||||
<template #right>
|
<template #right>
|
||||||
<el-input
|
<el-date-picker
|
||||||
v-model="search.title"
|
v-model="today"
|
||||||
class="search-input"
|
value-format="yyyy-MM-dd"
|
||||||
|
:clearable="false"
|
||||||
|
type="date"
|
||||||
size="small"
|
size="small"
|
||||||
v-throttle="() => { search.current = 1, getList() }"
|
placeholder="请选择开始日期">
|
||||||
placeholder="请输入标题"
|
</el-date-picker>
|
||||||
clearable
|
|
||||||
@clear="search.current = 1, getList()"
|
|
||||||
suffix-icon="iconfont iconSearch">
|
|
||||||
</el-input>
|
|
||||||
</template>
|
</template>
|
||||||
</ai-search-bar>
|
<template #content>
|
||||||
<ai-table
|
<div class="statistic ">
|
||||||
:tableData="tableData"
|
<div class="statistic-item">
|
||||||
:col-configs="colConfigs"
|
<h2>课程数量</h2>
|
||||||
:total="total"
|
<div class="bottom">
|
||||||
style="margin-top: 6px;"
|
<div class="bottom-item">
|
||||||
:current.sync="search.current"
|
<h3>2131</h3>
|
||||||
:size.sync="search.size"
|
<p>视频课程</p>
|
||||||
@getList="getList">
|
</div>
|
||||||
<el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
|
<div class="bottom-item">
|
||||||
<template slot-scope="{ row }">
|
<h3>2131</h3>
|
||||||
<div class="table-options">
|
<p>图文课程</p>
|
||||||
<el-button type="text" @click="toAdd(row.id)">编辑</el-button>
|
</div>
|
||||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="statistic-item">
|
||||||
|
<h2>课程学习人数</h2>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom-item">
|
||||||
|
<h3>253000</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="statistic-item">
|
||||||
|
<h2>课程累计学习时长</h2>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom-item">
|
||||||
|
<h3>2131</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="statistic-item">
|
||||||
|
<h2>考试人数</h2>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom-item">
|
||||||
|
<h3>2131</h3>
|
||||||
|
<p>视频课程</p>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-item">
|
||||||
|
<h3>2131</h3>
|
||||||
|
<p>图文课程</p>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-item">
|
||||||
|
<h3>2131</h3>
|
||||||
|
<p>视频课程</p>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-item">
|
||||||
|
<h3>2131</h3>
|
||||||
|
<p>图文课程</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="statistic-item">
|
||||||
|
<h2>获得证书人数</h2>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom-item">
|
||||||
|
<h3>2131</h3>
|
||||||
|
<p>学习</p>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-item">
|
||||||
|
<h3>2131</h3>
|
||||||
|
<p>考试</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<div class="middle">
|
||||||
|
<ai-card class="rank-card" title="热度榜单">
|
||||||
|
<template #title>
|
||||||
|
<div class="rank-title">
|
||||||
|
<h2>热度榜单</h2>
|
||||||
|
<el-radio-group v-model="date" size="small">
|
||||||
|
<el-radio-button label="课程" ></el-radio-button>
|
||||||
|
<el-radio-button label="考试"></el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
<template #right>
|
||||||
</ai-table>
|
<el-radio-group v-model="date" size="small">
|
||||||
|
<el-radio-button label="今天" ></el-radio-button>
|
||||||
|
<el-radio-button label="本周"></el-radio-button>
|
||||||
|
<el-radio-button label="本月"></el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="today"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
:clearable="false"
|
||||||
|
type="date"
|
||||||
|
size="small"
|
||||||
|
placeholder="请选择开始日期">
|
||||||
|
</el-date-picker>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<ai-table
|
||||||
|
:tableData="tableData"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="total"
|
||||||
|
style="margin-top: 6px;"
|
||||||
|
:current.sync="search.current"
|
||||||
|
:size.sync="search.size"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="options" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card class="resident" title="居民统计">
|
||||||
|
<template #right>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<div class="chart2" style="width: 100%; height: 340px"></div>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</ai-list>
|
</ai-list>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AppLearningStatistics',
|
name: 'AppLearningStatistics',
|
||||||
label: '学习统计',
|
label: '学习统计',
|
||||||
@@ -54,31 +150,24 @@
|
|||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
date: '',
|
||||||
search: {
|
search: {
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
title: '',
|
title: '',
|
||||||
areaId: ''
|
status: ''
|
||||||
},
|
},
|
||||||
total: 10,
|
total: 10,
|
||||||
colConfigs: [
|
colConfigs: [
|
||||||
{ prop: 'title', label: '题目', align: 'left' },
|
{ type: 'index', label: '排名', align: 'left' },
|
||||||
{ prop: 'createUserName', label: '证书名称', align: 'center' },
|
{ prop: 'createUserName', label: '课程', align: 'center' },
|
||||||
{ prop: 'createUserName', label: '类型', align: 'center' },
|
{ prop: 'createUserName', label: '学习人数', align: 'center' }
|
||||||
{ prop: 'createUserName', label: '已颁发数量', align: 'center' },
|
|
||||||
{ prop: 'createUserName', label: '累积学习时（分钟）', align: 'center' },
|
|
||||||
{ prop: 'createUserName', label: '通过考试', align: 'center' }
|
|
||||||
],
|
],
|
||||||
tableData: []
|
tableData: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
created() {
|
||||||
...mapState(['user'])
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.search.areaId = this.user.info.areaId
|
|
||||||
this.getList()
|
this.getList()
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -129,4 +218,111 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.AppLearningStatistics {
|
||||||
|
.right-search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #686868;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:first-child {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.rank-card {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resident {
|
||||||
|
width: 500px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-right: 32px;
|
||||||
|
color: #222;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ai-list__content--right .ai-list__content--right-wrapper ) {
|
||||||
|
padding: 0!important;
|
||||||
|
background: transparent!important;
|
||||||
|
border-radius: 0!important;
|
||||||
|
box-shadow: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistic {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.statistic-item {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #FFA322;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #777;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 30px 0 10px;
|
||||||
|
|
||||||
|
.bottom-item {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 30px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .ai-list__content--right ){
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
margin-left: 1px;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.ai-list__content--right-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user