123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660 |
- <style lang="scss" scoped>
- .search-bar {
- display: flex;
- align-items: center;
- }
- .search-box p {
- display: inline-block;
- border: 1px solid #f2f2f2;
- border-radius: 5px;
- margin-right: 10px;
- padding: 5px 10px;
- cursor: pointer;
- }
- </style>
- <style>
- /* .data-display-statistics .ant-card-body {
- padding: 0 15px;
- } */
- .data-display-statistics .ant-col-6 {
- margin: 10px 0;
- }
- .data-display-statistics .ant-col-6 .ant-card-body {
- display: flex;
- justify-content: center;
- }
- .data-display-statistics .ant-col-6 p,
- .data-display-statistics .ant-col-6 span {
- text-align: center;
- line-height: 40px;
- font-size: 30px;
- font-weight: 600;
- color: red;
- margin: 0;
- }
- .search-box .ant-card-body {
- padding: 5px 15px;
- }
- .data-display-statistics .ant-col-6 .ant-card-body .styleElse {
- line-height: 60px;
- height: 40px;
- font-size: 16px;
- font-weight: 400;
- margin-left: 10px;
- }
- .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
- display: none !important;
- }
- .yincang .ant-col-6 p {
- text-align: left;
- color: red;
- font-size: 16px;
- font-weight: 500;
- }
- .ant-table-thead div {
- font-weight: 700;
- }
- .tool-tip {
- position: absolute;
- top: 65px;
- right: 10px;
- }
- th div {
- white-space: nowrap;
- }
- </style>
- <template>
- <div class="data-statistics">
- <a-row class="image-list-heading vm-panel">
- <a-row type="flex" align="middle" justify="space-between" class="panel-body">
- <div class="search-bar" style="width:100%">
- <span>账户选择:</span>
- <a-select
- v-model="projectId"
- style="width:500px"
- showSearch
- optionFilterProp="children"
- :filterOption="filterOption"
- >
- <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.projectId">
- {{ item.projectName }} {{ item.advertiserName }}
- </a-select-option>
- </a-select>
- <span style="margin-left:10px">日期选择:</span>
- <a-date-picker v-model="statDate" format="YYYY-MM-DD" :defaultValue="moment().subtract(1, 'days')" />
- <span style="margin-left:10px">返点比例:</span>
- <a-input-number
- :min="1"
- :max="10"
- :step="0.01"
- v-model="discount"
- placeholder="请输入折扣"
- style="width:100px"
- />
- <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
- <a-button
- type="primary"
- icon="reload"
- @click="getDataReset"
- style="background-color:#67c23a;border-color:#67c23a"
- >刷新</a-button
- >
- </div>
- </a-row>
- </a-row>
- <a-row :gutter="10" style="margin-top:10px">
- <a-col :span="24">
- <a-card
- style="width:100%"
- :tabList="tabListNoTitle"
- :activeTabKey="noTitleKey"
- @tabChange="key => onTabChange(key, 'noTitleKey')"
- >
- <div style="display:flex;margin-bottom:15px">
- <!-- <a-select style="width: 120px" v-model="statHour" @change="getElseData" allowClear>
- <a-select-option v-for="item of 24" :key="item - 1" :value="item - 1">{{ item - 1 }}</a-select-option>
- </a-select> -->
- <a-button type="primary" @click="exportExcel">导出</a-button>
- </div>
- <a-table
- size="middle"
- :columns="columns"
- :dataSource="data"
- bordered
- id="outTable"
- :pagination="ipagination"
- :scroll="{ x: 2000 }"
- :loading="loading"
- >
- </a-table>
- </a-card>
- </a-col>
- </a-row>
- </div>
- </template>
- <script>
- import ARow from 'ant-design-vue/es/grid/Row'
- import ACol from 'ant-design-vue/es/grid/Col'
- import countTo from 'vue-count-to'
- import moment from 'moment'
- import { getDailyReport } from '@api/statistics'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
- import axios from 'axios'
- import lifting from '../components/lifting'
- import timeCheck from '../components/timeCheck'
- import Treeselect from '../components/Treeselect.vue'
- import { mapGetters } from 'vuex'
- import { JeecgListMixin } from '@/mixins/ipagination'
- var length = 0
- var active = 1
- const columns = [
- {
- title: '代理商',
- dataIndex: 'agent',
- scopedSlots: { customRender: 'agent' },
- align: 'center'
- },
- {
- title: '媒体',
- dataIndex: 'media',
- scopedSlots: { customRender: 'media' },
- align: 'center'
- },
- {
- title: '设备',
- dataIndex: 'systemType',
- align: 'center'
- },
- {
- title: '日期',
- dataIndex: 'statDate',
- align: 'center'
- },
- {
- title: '渠道包',
- dataIndex: 'campaignName',
- align: 'center'
- },
- {
- title: '账面花费',
- dataIndex: 'charge',
- align: 'center',
- scopedSlots: { customRender: 'charge' }
- },
- {
- title: '现金花费',
- dataIndex: 'cashCost',
- align: 'center',
- scopedSlots: { customRender: 'cashCost' }
- },
- {
- title: '曝光',
- dataIndex: 'photoShow',
- align: 'center',
- scopedSlots: { customRender: 'photoShow' }
- },
- {
- title: '点击',
- dataIndex: 'photoClick',
- align: 'center',
- scopedSlots: { customRender: 'photoClick' }
- },
- {
- title: '点击率',
- dataIndex: 'clickRate',
- align: 'center',
- scopedSlots: { customRender: 'clickRate' }
- },
- {
- title: '千次嚗光花费',
- dataIndex: 'impression1kCost',
- align: 'center',
- scopedSlots: { customRender: 'impression1kCost' }
- },
- {
- title: '行为量',
- dataIndex: 'bclick',
- align: 'center',
- scopedSlots: { customRender: 'bclick' }
- },
- {
- title: '下载完成数',
- dataIndex: 'eventJinJianApp',
- align: 'center',
- scopedSlots: { customRender: 'eventJinJianApp' }
- },
- {
- title: '账户激活量',
- dataIndex: 'activation',
- align: 'center',
- scopedSlots: { customRender: 'activation' }
- },
- {
- title: '友盟激活量',
- dataIndex: 'youMengactivation',
- align: 'center',
- scopedSlots: { customRender: 'youMengactivation' }
- },
- {
- title: 'TD激活量',
- dataIndex: 'tdActivation',
- align: 'center',
- scopedSlots: { customRender: 'tdActivation' }
- },
- {
- title: '账户激活成本',
- dataIndex: 'activationCost',
- align: 'center',
- scopedSlots: { customRender: 'activationCost' }
- },
- {
- title: '友盟激活成本',
- dataIndex: 'youMengactivationCost',
- align: 'center',
- scopedSlots: { customRender: 'youMengactivationCost' }
- },
- {
- title: 'TD激活成本',
- dataIndex: 'tdActivationCost',
- align: 'center',
- scopedSlots: { customRender: 'tdActivationCost' }
- },
- {
- title: '平均行为单价',
- dataIndex: 'actionCost',
- align: 'center',
- scopedSlots: { customRender: 'actionCost' }
- },
- {
- title: '平均点击单价',
- dataIndex: 'clickCost',
- align: 'center',
- scopedSlots: { customRender: 'clickCost' }
- },
- {
- title: '行为率',
- dataIndex: 'actionRatio',
- align: 'center',
- scopedSlots: { customRender: 'actionRatio' }
- },
- {
- title: '下载完成行为率',
- dataIndex: 'eventJinJianAppRatio',
- align: 'center',
- scopedSlots: { customRender: 'eventJinJianAppRatio' }
- },
- {
- title: '下载完成激活率',
- dataIndex: 'activationRatio',
- align: 'center',
- scopedSlots: { customRender: 'activationRatio' }
- }
- ]
- const columnsThree = [
- {
- title: '代理商',
- dataIndex: 'agent',
- scopedSlots: { customRender: 'agent' },
- align: 'center'
- },
- {
- title: '媒体',
- dataIndex: 'media',
- scopedSlots: { customRender: 'media' },
- align: 'center'
- },
- {
- title: '设备',
- dataIndex: 'systemType',
- align: 'center'
- },
- {
- title: '日期',
- dataIndex: 'statDate',
- align: 'center'
- },
- {
- title: '账面花费',
- dataIndex: 'charge',
- align: 'center',
- scopedSlots: { customRender: 'charge' }
- },
- {
- title: '现金花费',
- dataIndex: 'cashCost',
- align: 'center',
- scopedSlots: { customRender: 'cashCost' }
- },
- {
- title: '曝光',
- dataIndex: 'photoShow',
- align: 'center',
- scopedSlots: { customRender: 'photoShow' }
- },
- {
- title: '点击',
- dataIndex: 'photoClick',
- align: 'center',
- scopedSlots: { customRender: 'photoClick' }
- },
- {
- title: '点击率',
- dataIndex: 'clickRate',
- align: 'center',
- scopedSlots: { customRender: 'clickRate' }
- },
- {
- title: '千次嚗光花费',
- dataIndex: 'impression1kCost',
- align: 'center',
- scopedSlots: { customRender: 'impression1kCost' }
- },
- {
- title: '行为量',
- dataIndex: 'bclick',
- align: 'center',
- scopedSlots: { customRender: 'bclick' }
- },
- {
- title: '下载完成数',
- dataIndex: 'eventJinJianApp',
- align: 'center',
- scopedSlots: { customRender: 'eventJinJianApp' }
- },
- {
- title: '账户激活量',
- dataIndex: 'activation',
- align: 'center',
- scopedSlots: { customRender: 'activation' }
- },
- {
- title: '友盟激活量',
- dataIndex: 'youMengactivation',
- align: 'center',
- scopedSlots: { customRender: 'youMengactivation' }
- },
- {
- title: 'TD激活量',
- dataIndex: 'tdActivation',
- align: 'center',
- scopedSlots: { customRender: 'tdActivation' }
- },
- {
- title: '账户激活成本',
- dataIndex: 'activationCost',
- align: 'center',
- scopedSlots: { customRender: 'activationCost' }
- },
- {
- title: '友盟激活成本',
- dataIndex: 'youMengactivationCost',
- align: 'center',
- scopedSlots: { customRender: 'youMengactivationCost' }
- },
- {
- title: 'TD激活成本',
- dataIndex: 'tdActivationCost',
- align: 'center',
- scopedSlots: { customRender: 'tdActivationCost' }
- },
- {
- title: '平均行为单价',
- dataIndex: 'actionCost',
- align: 'center',
- scopedSlots: { customRender: 'actionCost' }
- },
- {
- title: '平均点击单价',
- dataIndex: 'clickCost',
- align: 'center',
- scopedSlots: { customRender: 'clickCost' }
- },
- {
- title: '行为率',
- dataIndex: 'actionRatio',
- align: 'center',
- scopedSlots: { customRender: 'actionRatio' }
- },
- {
- title: '下载完成行为率',
- dataIndex: 'eventJinJianAppRatio',
- align: 'center',
- scopedSlots: { customRender: 'eventJinJianAppRatio' }
- },
- {
- title: '下载完成激活率',
- dataIndex: 'activationRatio',
- align: 'center',
- scopedSlots: { customRender: 'activationRatio' }
- }
- ]
- const columnsGroup = columns
- export default {
- name: 'data-display-statistics',
- components: {
- ACol,
- ARow,
- countTo,
- lifting,
- timeCheck,
- Treeselect
- },
- mixins: [JeecgListMixin],
- data: function() {
- return {
- // this.timeRange[1] = moment().add(1, 'months')
- statDate: moment().subtract(1, 'day'),
- title: '账户数据展示',
- show: true,
- data: [],
- dataAll: null,
- columns: columnsThree,
- options: [],
- list: [],
- appId: [],
- tabListNoTitle: [
- {
- key: 'day',
- tab: '安卓汇总'
- },
- {
- key: 'group',
- tab: 'ios汇总'
- },
- {
- key: 'application',
- tab: '应用直达'
- },
- {
- key: 'channel',
- tab: '渠道包分析'
- }
- ],
- noTitleKey: 'day',
- discount: 1.06,
- date: '',
- loading: false,
- dataElse: [],
- projectId: 50
- }
- },
- filters: {
- formatDate: function(value) {
- let date = new Date(value)
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- let h = date.getHours()
- h = h < 10 ? '0' + h : h
- let m = date.getMinutes()
- m = m < 10 ? '0' + m : m
- let s = date.getSeconds()
- s = s < 10 ? '0' + s : s
- return y + '-' + MM + '-' + d
- },
- toFixtwo: function(value) {
- if (value) {
- return value.toFixed(2)
- } else {
- return 0.0
- }
- },
- getBo: function(value) {
- if (value) {
- return (value * 100).toFixed(2) + '%'
- } else {
- return '0.00%'
- }
- }
- },
- methods: {
- moment,
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- getParticipateList() {
- postAction('/ctop/projectMember/participateListByMediaId', {
- userId: this.userInfo().id,
- type: "kuaishou"
- }).then(res => {
- if (res.success) {
- this.dataElse = res.result
- }
- })
- },
- onTabChange(key, type) {
- console.log(key, type)
- this[type] = key
- this.data = []
- if (this.noTitleKey == 'day') {
- this.columns = columnsThree
- this.data.push(this.dataAll.android)
- } else if (this.noTitleKey == 'group') {
- this.columns = columnsThree
- this.data.push(this.dataAll.ios)
- } else if (this.noTitleKey == 'application') {
- this.columns = columnsThree
- this.data.push(this.dataAll.directApplication)
- } else if (this.noTitleKey == 'channel') {
- this.columns = columns
- this.data = this.dataAll.channelSubcontracting.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- }
- this.ipagination.total = this.data.length
- this.ipagination.current = 1
- },
- disabledDate(current) {
- return current && current > moment().subtract(1, 'day')
- },
- getDataReset() {
- this.addUser()
- },
- addUser() {
- var that = this
- // if (this.appId.length > 0 && this.date != '') {
- that.getDailyReport()
- // } else {
- // this.$message.error('请选择账户及时间')
- // }
- },
- getDailyReport() {
- var params = {}
- params.projectId = this.projectId
- params.disCount = this.discount
- params.statDate = this.statDate.format('YYYY-MM-DD')
- this.data = []
- this.loading = true
- postAction('/ctop/yiche/report/dailyReport', params).then(res => {
- if (res.success) {
- this.loading = false
- this.dataAll = res.result
- console.log(res)
- if (this.noTitleKey == 'day') {
- this.columns = columnsThree
- this.data.push({ ...res.result.android, key: 1 })
- } else if (this.noTitleKey == 'group') {
- this.columns = columnsThree
- this.data.push({ ...res.result.ios, key: 1 })
- } else if (this.noTitleKey == 'application') {
- this.columns = columnsThree
- this.data.push({ ...res.result.directApplication, key: 1 })
- } else if (this.noTitleKey == 'channel') {
- this.columns = columns
- this.data = res.result.channelSubcontracting.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- }
- this.ipagination.total = this.data.length
- }
- })
- },
- getDate(value) {
- if (value) {
- let date = new Date(value)
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- this.date = y + '-' + MM + '-' + d
- } else {
- let date = new Date()
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- this.date = y + '-' + MM + '-' + d
- }
- },
- exportExcel() {
- var params = {}
- params.projectId = this.projectId
- params.disCount = this.discount
- params.statDate = this.statDate.format('YYYY-MM-DD')
- var name = this.dataElse.filter(item => {
- return item.projectId == this.projectId
- })[0].projectName
- downFilePost('/ctop/yiche/report/exportDailyReport', params).then(res => {
- let blob = new Blob([res], {
- type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
- })
- let downloadElement = document.createElement('a')
- let href = window.URL.createObjectURL(blob) //创建下载的链接
- downloadElement.href = href
- downloadElement.download = name + '-' + this.statDate.format('YYYY-MM-DD') + '-日报' //下载后文件名
- document.body.appendChild(downloadElement)
- downloadElement.click() //点击下载
- document.body.removeChild(downloadElement) //下载完成移除元素
- window.URL.revokeObjectURL(href) //释放掉blob对象
- })
- }
- },
- watch: {},
- distoryed() {},
- mounted: function() {
- this.getParticipateList()
- this.statDate = moment().subtract(1, 'day')
- // moment().format('YYYY-MM-DD_HH:mm')
- }
- }
- </script>
|