kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

公众号

Browse Source
This commit is contained in:
yanran200730
2023-06-09 11:14:34 +08:00
parent 7e40790569
commit 6a3cadf53d
2 changed files with 150 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
project/oms/apps/AppNewsStatistics/AppNewsStatistics.vue
View File

@@ -1,23 +1,26 @@
<template> <template>
<ai-list class="AppNewsStatistics"> <ai-list class="AppNewsStatistics">
<template slot="title"> <template slot="title">
<ai-title title="新闻统计" isShowBottomBorder isShowArea :hideLevel="user.info.areaList.length - 1" v-model="areaId" :instance="instance" @change="onChange()"> <ai-title title="新闻统计" isShowBottomBorder @change="onChange()">
<template #rightBtn> <template #rightBtn>
<el-radio-group style="margin: 0 12px;" v-model="search.dateRange" size="small" @change="search.date = []"> <div class="flex" flex>
<el-radio-button label="0">今天</el-radio-button> <AiAreaGet :valueLevel="3" style="width: 250px" clearable always-show :instance="instance" v-model="search.areaId"></AiAreaGet>
<el-radio-button label="1">本周</el-radio-button> <el-radio-group style="margin: 0 12px;" v-model="search.dateRange" size="small" @change="search.date = []">
<el-radio-button label="2">本月</el-radio-button> <el-radio-button label="0">今天</el-radio-button>
</el-radio-group> <el-radio-button label="1">本周</el-radio-button>
<el-date-picker <el-radio-button label="2">本月</el-radio-button>
style="width: 240px" </el-radio-group>
v-model="search.date" <el-date-picker
value-format="yyyy-MM-dd" style="width: 240px"
@change="search.dateRange = ''" v-model="search.date"
type="daterange" value-format="yyyy-MM-dd"
start-placeholder="开始日期" @change="search.dateRange = ''"
end-placeholder="结束日期" type="daterange"
size="small"> start-placeholder="开始日期"
</el-date-picker> end-placeholder="结束日期"
size="small">
</el-date-picker>
</div>
</template> </template>
</ai-title> </ai-title>
</template> </template>
@@ -79,7 +82,7 @@
}, },
created () { created () {
this.areaId = this.user.info.areaId // this.areaId = this.user.info.areaId
}, },
methods: { methods: {

211
project/oms/apps/AppWechatStatistics/AppWechatStatistics.vue
View File

@@ -1,59 +1,75 @@
<template> <template>
<ai-list class="AppNewsStatistics"> <ai-list class="AppWechatStatistics">
<template slot="title"> <template slot="title">
<ai-title title="公众号统计" isShowBottomBorder isShowArea :hideLevel="user.info.areaList.length - 1" v-model="areaId" :instance="instance" @change="onChange()"> <ai-title title="公众号统计" isShowBottomBorder :instance="instance" @change="onChange()">
<template #rightBtn> <template #rightBtn>
<el-radio-group style="margin: 0 12px;" v-model="search.dateRange" size="small" @change="search.date = []"> <div class="flex" flex>
<el-radio-button label="0">今天</el-radio-button> <el-radio-group style="margin: 0 12px;" v-model="search.type" size="small" @change="getInfo">
<el-radio-button label="1">本周</el-radio-button> <el-radio-button label="0">昨日</el-radio-button>
<el-radio-button label="2">本月</el-radio-button> <el-radio-button label="1">近七天</el-radio-button>
</el-radio-group> <el-radio-button label="2">近30天</el-radio-button>
<el-date-picker </el-radio-group>
style="width: 240px" <el-date-picker
v-model="search.date" style="width: 240px; margin-right: 12px;"
value-format="yyyy-MM-dd" v-model="date"
@change="search.dateRange = ''" value-format="yyyy-MM-dd"
type="daterange" @change="onDateChange"
start-placeholder="开始日期" type="daterange"
end-placeholder="结束日期" start-placeholder="开始日期"
size="small"> end-placeholder="结束日期"
</el-date-picker> size="small">
</el-date-picker>
<ai-select
:selectList="wechatList"
placeholder="请选择公众号"
v-model="search.appId"
@change="getInfo">
</ai-select>
</div>
</template> </template>
</ai-title> </ai-title>
</template> </template>
<template slot="content"> <template slot="content">
<div class="statistics-top"> <div class="statistics-top">
<div class="statistics-top__item"> <div class="statistics-top__item">
<span>发布文章总数</span> <span>曝光量</span>
<h2 style="color: #2266FF;">{{ info.total }}</h2> <h2 style="color: #2266FF;">{{ info['曝光量'] || 0 }}</h2>
</div> </div>
<div class="statistics-top__item"> <div class="statistics-top__item">
<span>浏览量总数</span> <span>曝光率</span>
<h2 style="color: #22AA99;">{{ info.today }}</h2> <h2 style="color: #22AA99;">{{ info['曝光量'] || 0 }}</h2>
</div> </div>
<div class="statistics-top__item"> <div class="statistics-top__item">
<span>平均浏览量</span> <span>点击量</span>
<h2 style="color: #F8B425">{{ info.unReport }}</h2> <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['已结算金额'] ? (info['已结算金额'] / 100).toFixed(2) : 0 }}</h2>
</div> </div>
</div> </div>
<div class="bottom"> <ai-card title="每日收益明细">
<ai-card title="文章浏览排行"> <ai-table
:tableData="tableData"
</ai-card> :col-configs="colConfigs"
<ai-card title="地区浏览排行"> :total="total"
:current.sync="search.current"
</ai-card> :size.sync="search.size"
</div> @getList="getList">
</ai-table>
</ai-card>
</template> </template>
</ai-list> </ai-list>
</template> </template>
<script> <script>
import { mapState } from 'vuex'
import * as echarts from 'echarts'
export default { export default {
name: 'AppNewsStatistics', name: 'AppWechatStatistics',
label: '新闻统计', label: '公众号统计',
props: { props: {
instance: Function, instance: Function,
@@ -62,69 +78,96 @@
data () { data () {
return { return {
date: '',
today: '', today: '',
date: '',
search: { search: {
title: '', current: 1,
areaId: '', size: 10,
dateRange: '1', type: '0',
date: [] appId: ''
}, },
info: {} total: 0,
info: {},
tableData: [],
wechatList: [],
colConfigs: [
{ prop: 'ymd', label: '日期' },
{ 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.toFixed(2) },
{ prop: 'income', label: '收入（元）', align: 'center', format: v => v.toFixed(2) }
]
} }
}, },
computed: {
...mapState(['user'])
},
created () { created () {
this.areaId = this.user.info.areaId this.getInfo()
this.getWechatList()
}, },
methods: { methods: {
onChange () { onDateChange (e) {
}, if (!e) {
this.search.type = '0'
initPieChart (data) { } else {
let chart = echarts.init(document.querySelector('.chart')) this.search.type = '3'
const option = {
tooltip: {},
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
legend: {
show: true
},
series: [
{
type: 'pie',
radius: '50%',
data: Object.keys(data).map(v => {
return {
value: data[v],
name: v
}
}),
label : {
normal : {
formatter: '{b}：{c}',
textStyle : {
fontWeight : 'normal',
fontSize : 15
}
}
}
}
]
} }
chart.setOption(option) this.getInfo()
} },
getInfo () {
this.instance.post(`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(`/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(`/wxmpconfig/list?size=1000`).then(res => {
if (res.code == 0) {
this.wechatList = res.data.records.map(v => {
return {
dictValue: v.appId,
dictName: v.mpName
}
})
}
})
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.AppNewsStatistics { .AppWechatStatistics {
.bottom { .bottom {
display: flex; display: flex;
@@ -150,6 +193,12 @@
} }
} }
:deep( .ai-card) {
.ai-card__body {
padding: 12px 16px;
}
}
.statistics-top { .statistics-top {
display: flex; display: flex;
align-items: center; align-items: center;