408 lines
11 KiB
Vue
408 lines
11 KiB
Vue
<template>
|
||
<ai-list class="AppLearningStatistics">
|
||
<template slot="title">
|
||
<ai-title title="学习统计" isShowBottomBorder></ai-title>
|
||
</template>
|
||
<template slot="content">
|
||
<ai-card title="关键数据">
|
||
<template #right>
|
||
<el-radio-group v-model="search1.dateRange" size="small" @change="getStatisticsKeyData">
|
||
<el-radio-button label="0">今天</el-radio-button>
|
||
<el-radio-button label="1">本周</el-radio-button>
|
||
<el-radio-button label="2">本月</el-radio-button>
|
||
</el-radio-group>
|
||
<el-date-picker
|
||
style="width: 240px"
|
||
v-model="search1.date"
|
||
value-format="yyyy-MM-dd"
|
||
@change="getStatisticsKeyData"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
size="small">
|
||
</el-date-picker>
|
||
</template>
|
||
<template #content>
|
||
<div class="statistic ">
|
||
<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 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" v-for="(item, index) in statisticsKeyData" :key="index">
|
||
<h3>{{ item }}</h3>
|
||
<p>{{ index }}</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="type" size="small">
|
||
<el-radio-button :label="0">课程</el-radio-button>
|
||
<el-radio-button :label="1">考试</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</template>
|
||
<template #right>
|
||
<el-radio-group v-model="search2.dateRange" size="small" @change="getStatisticsHot">
|
||
<el-radio-button label="0" >今天</el-radio-button>
|
||
<el-radio-button label="1">本周</el-radio-button>
|
||
<el-radio-button label="2">本月</el-radio-button>
|
||
</el-radio-group>
|
||
<el-date-picker
|
||
style="width: 240px"
|
||
v-model="search2.date"
|
||
value-format="yyyy-MM-dd"
|
||
@change="getStatisticsHot"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
size="small">
|
||
</el-date-picker>
|
||
</template>
|
||
<template #content>
|
||
<ai-table
|
||
v-if="type === 0"
|
||
:tableData="tableData1"
|
||
:col-configs="colConfigs1"
|
||
:isShowPagination="false"
|
||
style="margin-top: 6px;"
|
||
@getList="getStatisticsHot">
|
||
</ai-table>
|
||
<ai-table
|
||
v-else
|
||
:tableData="tableData2"
|
||
:isShowPagination="false"
|
||
:col-configs="colConfigs2"
|
||
style="margin-top: 6px;"
|
||
@getList="getStatisticsHot">
|
||
</ai-table>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card class="resident" title="居民统计">
|
||
<template #right>
|
||
<el-radio-group v-model="search4.dateRange" size="small" @change="getStatisticsHot">
|
||
<el-radio-button label="0" >今天</el-radio-button>
|
||
<el-radio-button label="1">本周</el-radio-button>
|
||
<el-radio-button label="2">本月</el-radio-button>
|
||
</el-radio-group>
|
||
<el-date-picker
|
||
style="width: 240px"
|
||
v-model="search4.date"
|
||
value-format="yyyy-MM-dd"
|
||
@change="getStatisticsHot"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
size="small">
|
||
</el-date-picker>
|
||
</template>
|
||
<template #content>
|
||
<div class="chart" style="width: 100%; height: 340px"></div>
|
||
</template>
|
||
</ai-card>
|
||
</div>
|
||
</template>
|
||
</ai-list>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
export default {
|
||
name: 'AppLearningStatistics',
|
||
label: '学习统计',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
date: '',
|
||
today: '',
|
||
search1: {
|
||
title: '',
|
||
areaId: '',
|
||
dateRange: '0',
|
||
date: []
|
||
},
|
||
search2: {
|
||
areaId: '',
|
||
dateRange: '0',
|
||
date: []
|
||
},
|
||
search3: {
|
||
areaId: '',
|
||
dateRange: '0',
|
||
date: []
|
||
},
|
||
search4: {
|
||
areaId: '',
|
||
dateRange: '0',
|
||
date: []
|
||
},
|
||
type: 0,
|
||
colConfigs1: [
|
||
{ type: 'index', label: '排名', align: 'left' },
|
||
{ prop: 'examinationName', label: '课程', align: 'center' },
|
||
{ prop: 'examinationNumber', label: '学习人数', align: 'center' }
|
||
],
|
||
colConfigs2: [
|
||
{ type: 'index', label: '排名', align: 'left' },
|
||
{ prop: 'createUserName', label: '课程', align: 'center' },
|
||
{ prop: 'createUserName', label: '学习人数', align: 'center' }
|
||
],
|
||
tableData1: [],
|
||
tableData2: [],
|
||
statisticsKeyData: {}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
|
||
created () {
|
||
this.search1.areaId = this.user.info.areaId
|
||
this.getStatisticsKeyData()
|
||
this.getStatisticsHot()
|
||
},
|
||
|
||
methods: {
|
||
getStatisticsKeyData () {
|
||
this.instance.post(`/app/appexaminationinfo/statisticsKeyData`, null, {
|
||
params: {
|
||
...this.search1,
|
||
beginDate: this.search1.date[0],
|
||
endDate: this.search1.date[1]
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.statisticsKeyData = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
getStatisticsHot () {
|
||
this.instance.post(`/app/appexaminationinfo/statisticsHot`, null, {
|
||
params: {
|
||
...this.search2,
|
||
size: 20
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.tableData1 = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
initPieChart (data) {
|
||
let chart = echarts.init(document.querySelector('.chart'))
|
||
const option = {
|
||
tooltip: {},
|
||
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
|
||
legend: {
|
||
right: '5%',
|
||
top: 'center',
|
||
orient: 'vertical',
|
||
formatter: function(name) {
|
||
let data = option.series[0].data
|
||
let total = 0
|
||
let tarValue = 0
|
||
for (let i = 0, l = data.length; i < l; i++) {
|
||
total += data[i].value
|
||
if (data[i].name == name) {
|
||
tarValue = data[i].value
|
||
}
|
||
}
|
||
let p = total === 0 ? 0 : (tarValue / total * 100).toFixed(2)
|
||
return name + '：' + tarValue + ' ' + p + '%'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: '50%',
|
||
data: data.map(v => {
|
||
return {
|
||
value: v.c,
|
||
name: v.status
|
||
}
|
||
}),
|
||
label : {
|
||
normal : {
|
||
formatter: '{b}：({d}%)',
|
||
textStyle : {
|
||
fontWeight : 'normal',
|
||
fontSize : 15
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
chart.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<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: 560px;
|
||
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;
|
||
word-break: keep-all;
|
||
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>
|