<template>
|
<div class="content">
|
<div class="top-num">
|
<div class="title">数据统计</div>
|
<div class="num-content">
|
<div class="num-item" v-for="(item, index) in statistics" :key="index">
|
<div class="num-title">{{ item.title }}</div>
|
<div class="num-value">{{ item.num }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="table">
|
<div class="tool">
|
<div class="title">用户登录次数趋势图</div>
|
<div class="right-option">
|
<el-date-picker
|
v-model="value"
|
type="daterange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
@change="dataChange"
|
>
|
</el-date-picker>
|
<div style="width: 5px;"></div>
|
<el-select v-model="searchForm.orgin" placeholder="请选择登录来源" clearable @change="getList">
|
<el-option value="0" label="PC登陆"/>
|
<el-option value="1" label="钉钉平台"/>
|
<el-option value="2" label="羚羊平台"/>
|
<el-option value="3" label="EDGP平台"/>
|
<el-option value="4" label="微信小程序"/>
|
</el-select>
|
</div>
|
</div>
|
<div id="chart"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getStagingLoginVO, getActivityLoginVOList } from "@/api/business/workbench.js"
|
import * as eCharts from 'echarts'
|
export default {
|
data() {
|
return {
|
statistics: [
|
{
|
title: '今日活跃用户',
|
num: ''
|
},
|
{
|
title: '今日活跃企业',
|
num: ''
|
},
|
{
|
title: '本月登录企业数',
|
num: ''
|
},
|
{
|
title: '本月登录2次及以上企业数',
|
num: ''
|
},
|
{
|
title: '本月登录2次及以上企业数(羚羊)',
|
num: ''
|
}
|
],
|
value: [],
|
searchForm: {
|
orgin: '',
|
startDate: '',
|
endDate: ''
|
},
|
list: []
|
}
|
},
|
created() {
|
let temp = new Date()
|
let startTemp = new Date()
|
this.searchForm.endDate = `${temp.getFullYear()}-${temp.getMonth() + 1}-${temp.getDate()}`
|
startTemp.setTime(startTemp.getTime() - 3600 * 1000 * 24 * 15)
|
this.searchForm.startDate = `${startTemp.getFullYear()}-${startTemp.getMonth() + 1}-${startTemp.getDate()}`
|
this.value = [this.searchForm.startDate, this.searchForm.endDate]
|
this.getList()
|
getStagingLoginVO()
|
.then(res => {
|
this.statistics[0].num = res.dayActiveUserNum
|
this.statistics[1].num = res.dayActiveCompanyNum
|
this.statistics[2].num = res.monthActiveCompanyNum
|
this.statistics[3].num = res.monthTwoCompanyNum
|
this.statistics[4].num = res.monthTwoCompanyLYNum
|
})
|
},
|
methods: {
|
dataChange(v) {
|
console.log(v);
|
this.searchForm.startDate = v[0]
|
this.searchForm.endDate = v[1]
|
this.getList()
|
},
|
getList() {
|
getActivityLoginVOList(this.searchForm)
|
.then(res => {
|
this.list = res
|
this.renderChart()
|
})
|
},
|
renderChart() {
|
let chart = eCharts.init(document.getElementById('chart'))
|
let name = []
|
let num = []
|
this.list.forEach(item => {
|
name.push(item.dataDate)
|
num.push(item.dayActiveUserNum)
|
})
|
chart.setOption({
|
|
tooltip: {},
|
grid: {
|
top: 40,
|
bottom: 30,
|
left: 60,
|
rigth: 30
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: name
|
},
|
yAxis: {},
|
series: [
|
{
|
name: '销量',
|
type: 'line',
|
data: num
|
}
|
]
|
})
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
background-color: #f7f7f7;
|
padding: 0 10px;
|
height: 100%;
|
min-height: 700px;
|
display: flex;
|
flex-direction: column;
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
}
|
.top-num {
|
padding: 20px;
|
background-color: #fff;
|
.num-content {
|
margin-top: 20px;
|
display: flex;
|
|
.num-item {
|
margin-right: 20px;
|
flex: 1;
|
box-shadow: 0px 0px 10px rgba(170, 170, 170, 0.349019607843137);
|
padding: 20px;
|
&:last-child {
|
flex: 2;
|
margin-right: 0;
|
}
|
.num-title {
|
font-size: 16px;
|
}
|
.num-value {
|
margin-top: 5px;
|
font-size: 20px;
|
font-weight: 600;
|
color: #02a7f0;
|
}
|
}
|
}
|
}
|
.table {
|
flex: 1;
|
margin-top: 10px;
|
background-color: #fff;
|
padding: 20px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
.tool {
|
display: flex;
|
justify-content: space-between;
|
.right-option {
|
display: flex;
|
}
|
}
|
#chart {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
