This commit is contained in:
yanran200730
2023-02-16 15:15:16 +08:00
parent 1344fa92fe
commit 7652208a74

View File

@@ -6,13 +6,20 @@
<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
v-model="today"
style="width: 240px"
v-model="search1.date"
value-format="yyyy-MM-dd"
:clearable="false"
type="date"
size="small"
placeholder="请选择开始日期">
@change="getStatisticsKeyData"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small">
</el-date-picker>
</template>
<template #content>
@@ -49,21 +56,9 @@
<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 class="bottom-item" v-for="(item, index) in statisticsKeyData" :key="index">
<h3>{{ item }}</h3>
<p>{{ index }}</p>
</div>
</div>
</div>
@@ -88,49 +83,67 @@
<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 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="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 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
v-model="today"
style="width: 240px"
v-model="search2.date"
value-format="yyyy-MM-dd"
:clearable="false"
type="date"
size="small"
placeholder="请选择开始日期">
@change="getStatisticsHot"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small">
</el-date-picker>
</template>
<template #content>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
v-if="type === 0"
:tableData="tableData1"
:col-configs="colConfigs1"
:isShowPagination="false"
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>
@getList="getStatisticsHot">
</ai-table>
<ai-table
v-else
:tableData="tableData2"
: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="chart2" style="width: 100%; height: 340px"></div>
<div class="chart" style="width: 100%; height: 340px"></div>
</template>
</ai-card>
</div>
@@ -152,19 +165,42 @@
data () {
return {
date: '',
search: {
current: 1,
size: 10,
today: '',
search1: {
title: '',
areaId: ''
areaId: '',
dateRange: '0',
date: []
},
total: 10,
colConfigs: [
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' }
],
tableData: []
tableData1: [],
tableData2: [],
statisticsKeyData: {}
}
},
@@ -172,52 +208,87 @@
...mapState(['user'])
},
created() {
this.search.areaId = this.user.info.areaId
this.getList()
created () {
this.search1.areaId = this.user.info.areaId
this.getStatisticsKeyData()
this.getStatisticsHot()
},
methods: {
getList() {
this.instance.post(`/app/appmarketingactivityinfo/list`, null, {
getStatisticsKeyData () {
this.instance.post(`/app/appexaminationinfo/statisticsKeyData`, null, {
params: {
...this.search
...this.search1,
beginDate: this.search1.date[0],
endDate: this.search1.date[1]
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
this.statisticsKeyData = res.data
}
})
},
remove (id) {
this.$confirm('确定删除该活动?').then(() => {
this.instance.post(`/app/appmarketingactivityinfo/delete?id=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功!')
this.getList()
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
}
}
}
}
]
}
toDetail (id) {
this.$emit('change', {
type: 'Detail',
params: {
id: id || ''
}
})
},
toAdd(id) {
this.$emit('change', {
type: 'Add',
params: {
id: id || ''
}
})
chart.setOption(option)
}
}
}
@@ -253,7 +324,7 @@
}
.resident {
width: 500px;
width: 560px;
margin-left: 20px;
}
}
@@ -298,6 +369,7 @@
p {
margin-top: 10px;
word-break: keep-all;
color: #777;
font-size: 14px;
}