268 lines
7.3 KiB
Vue
268 lines
7.3 KiB
Vue
<template>
|
||
<ai-list class="AppWechatStatistics">
|
||
<template slot="title">
|
||
<ai-title title="公众号统计" isShowBottomBorder :instance="instance" @change="onChange()">
|
||
<template #rightBtn>
|
||
<div class="flex" flex>
|
||
<el-radio-group style="margin: 0 12px;" v-model="search.type" size="small" @change="getInfo">
|
||
<el-radio-button label="0">昨日</el-radio-button>
|
||
<el-radio-button label="1">近七天</el-radio-button>
|
||
<el-radio-button label="2">近30天</el-radio-button>
|
||
</el-radio-group>
|
||
<el-date-picker
|
||
style="width: 240px; margin-right: 12px;"
|
||
v-model="date"
|
||
value-format="yyyy-MM-dd"
|
||
@change="onDateChange"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
size="small">
|
||
</el-date-picker>
|
||
<ai-select
|
||
:selectList="wechatList"
|
||
placeholder="请选择公众号"
|
||
v-model="search.appId"
|
||
@change="getInfo">
|
||
</ai-select>
|
||
</div>
|
||
</template>
|
||
</ai-title>
|
||
</template>
|
||
<template slot="content">
|
||
<div class="statistics-top">
|
||
<div class="statistics-top__item">
|
||
<span>曝光量</span>
|
||
<h2 style="color: #2266FF;">{{ info['曝光量'] || 0 }}</h2>
|
||
</div>
|
||
<div class="statistics-top__item">
|
||
<span>曝光率</span>
|
||
<h2 style="color: #22AA99;">{{ ((info['曝光率'] || 0) * 100).toFixed(2) + '%' || 0 }}</h2>
|
||
</div>
|
||
<div class="statistics-top__item">
|
||
<span>点击量</span>
|
||
<h2 style="color: #F8B425">{{ info['点击量'] || 0 }}</h2>
|
||
</div>
|
||
<div class="statistics-top__item">
|
||
<span>收入（元）</span>
|
||
<h2 style="color: #2266FF;">{{ info['收入'] ? (info['收入'] / 100).toFixed(2) : 0 }}</h2>
|
||
</div>
|
||
<div class="statistics-top__item">
|
||
<span>已结算金额（元）</span>
|
||
<h2 style="color: #22AA99;">{{ info['已结算金额'] || 0 }}</h2>
|
||
</div>
|
||
</div>
|
||
<ai-card title="每日收益明细">
|
||
<template #right>
|
||
<ai-download
|
||
:instance="instance"
|
||
url="/api/wxmppublisheradposgeneral/export"
|
||
:params="params" fileName="每日收益明细"
|
||
:disabled="tableData.length == 0">
|
||
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||
</ai-download>
|
||
</template>
|
||
<ai-table
|
||
:tableData="tableData"
|
||
:col-configs="colConfigs"
|
||
:total="total"
|
||
:current.sync="search.current"
|
||
:size.sync="search.size"
|
||
@getList="getList">
|
||
</ai-table>
|
||
</ai-card>
|
||
</template>
|
||
</ai-list>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'AppWechatStatistics',
|
||
label: '公众号统计',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
today: '',
|
||
date: '',
|
||
search: {
|
||
current: 1,
|
||
size: 10,
|
||
type: '0',
|
||
appId: ''
|
||
},
|
||
total: 0,
|
||
info: {},
|
||
tableData: [],
|
||
wechatList: [],
|
||
colConfigs: [
|
||
{ prop: 'ymd', label: '日期' },
|
||
{ prop: 'adSlot', label: '广告位类型', align: 'center', format: v => this.dict.getLabel('ad_slot', v) },
|
||
{ prop: 'reqSuccCount', label: '拉取量', align: 'center' },
|
||
{ prop: 'exposureCount', label: '曝光量', align: 'center' },
|
||
{ prop: 'exposureRate', label: '曝光率', align: 'center', format: v => (v * 100).toFixed(2) + '%' },
|
||
{ prop: 'clickCount', label: '点击量', align: 'center' },
|
||
{ prop: 'clickRate', label: '点击率', align: 'center', format: v => (v * 100).toFixed(2) + '%' },
|
||
{ prop: 'ecpm', label: 'eCPM（元）', align: 'center', format: v => (v / 100).toFixed(2) },
|
||
{ prop: 'income', label: '收入（元）', align: 'center', format: v => (v / 100).toFixed(2) }
|
||
]
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
params () {
|
||
return {
|
||
...this.search,
|
||
startTime: this.search.type === '3' ? this.date[0] : '',
|
||
endTime: this.search.type === '3' ? this.date[1] : ''
|
||
}
|
||
}
|
||
},
|
||
|
||
created () {
|
||
this.dict.load('ad_slot').then(() => {
|
||
this.getWechatList()
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
onDateChange (e) {
|
||
if (!e) {
|
||
this.search.type = '0'
|
||
} else {
|
||
this.search.type = '3'
|
||
}
|
||
|
||
this.getInfo()
|
||
},
|
||
|
||
getInfo () {
|
||
this.instance.post(`/api/wxmppublisheradposgeneral/statistics`, null, {
|
||
params: {
|
||
...this.search,
|
||
startTime: this.search.type === '3' ? this.date[0] : '',
|
||
endTime: this.search.type === '3' ? this.date[1] : ''
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.info = res.data || {}
|
||
|
||
this.getList()
|
||
}
|
||
})
|
||
},
|
||
|
||
getList () {
|
||
this.instance.post(`/api/wxmppublisheradposgeneral/list`, null, {
|
||
params: {
|
||
...this.search,
|
||
startTime: this.search.type === '3' ? this.date[0] : '',
|
||
endTime: this.search.type === '3' ? this.date[1] : ''
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.tableData = res.data.records
|
||
this.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
|
||
getWechatList () {
|
||
this.instance.post(`/api/wxmpconfig/queryMyAppids`).then(res => {
|
||
if (res.code == 0) {
|
||
this.wechatList = res.data.map(v => {
|
||
return {
|
||
dictValue: v.appId,
|
||
dictName: v.mpName
|
||
}
|
||
})
|
||
|
||
if (res.data.length) {
|
||
this.search.appId = res.data[0].appId
|
||
|
||
this.getInfo()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppWechatStatistics {
|
||
|
||
.bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
& > .ai-card {
|
||
flex: 1;
|
||
|
||
&:last-child {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep( .ai-list__content ){
|
||
padding: 0!important;
|
||
|
||
.ai-list__content--right-wrapper {
|
||
background: transparent!important;
|
||
box-shadow: none!important;
|
||
margin: 0!important;
|
||
padding: 12px 16px 12px!important;
|
||
}
|
||
}
|
||
|
||
:deep( .ai-card) {
|
||
.ai-card__body {
|
||
padding: 12px 16px;
|
||
}
|
||
}
|
||
|
||
.statistics-top {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
|
||
& > div {
|
||
flex: 1;
|
||
height: 96px;
|
||
line-height: 1;
|
||
margin-right: 20px;
|
||
padding: 16px 24px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||
border-radius: 4px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
span {
|
||
display: block;
|
||
margin-bottom: 16px;
|
||
color: #888888;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 16px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||
}
|
||
}
|
||
</style>
|