|
@@ -46,6 +46,9 @@
|
|
|
.ant-table-pagination {
|
|
|
display: none;
|
|
|
}
|
|
|
+.ant-table-thead div{
|
|
|
+ font-weight: 700
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="statistics">
|
|
@@ -369,7 +372,7 @@
|
|
|
:activeTabKey="noTitleKeyTableTwo"
|
|
|
@tabChange="key => onTabChange(key, 'noTitleKeyTableTwo')"
|
|
|
>
|
|
|
- <a-table :columns="columnsDb" :dataSource="dataTableTwo" :pagination="false"></a-table>
|
|
|
+ <a-table :columns="columnsDb" :dataSource="dataTableTwo" :pagination="false" bordered></a-table>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -381,7 +384,16 @@
|
|
|
:activeTabKey="noTitleKeyTable"
|
|
|
@tabChange="key => onTabChange(key, 'noTitleKeyTable')"
|
|
|
>
|
|
|
- <a-table :columns="columns" :dataSource="dataTable" :pagination="false"></a-table>
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="dataTable"
|
|
|
+ :pagination="false"
|
|
|
+ :rowKey="record => record.statHour"
|
|
|
+ :loading="loading"
|
|
|
+ bordered
|
|
|
+ >
|
|
|
+ <template slot="yesCost" slot-scope="row">{{row}}</template>
|
|
|
+ </a-table>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -417,20 +429,44 @@ export default {
|
|
|
|
|
|
data: function() {
|
|
|
return {
|
|
|
+ loading: true,
|
|
|
columns: [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '升降值', dataIndex: 'proportion' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
+ { title: '时间', dataIndex: 'statDate', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '总消耗升降值',
|
|
|
+ dataIndex: 'yesCost',
|
|
|
+ scopedSlots: { customRender: 'yesCost' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '总消耗', dataIndex: 'cost', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '封面点击数升降值',
|
|
|
+ dataIndex: 'yesPhotoClick',
|
|
|
+ scopedSlots: { customRender: 'photoClickProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '封面曝光数升降值',
|
|
|
+ dataIndex: 'yesPhotoShow',
|
|
|
+ scopedSlots: { customRender: 'photoShowProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '素材曝光数升降值',
|
|
|
+ dataIndex: 'yesAclick',
|
|
|
+ scopedSlots: { customRender: 'aclickProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
|
|
|
],
|
|
|
columnsDb: [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
+ { title: '时间', dataIndex: 'statDate', align: 'center' },
|
|
|
+ { title: '总消耗', dataIndex: 'cost', align: 'center' },
|
|
|
+ { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
|
|
|
+ { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
|
|
|
+ { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
|
|
|
],
|
|
|
dataTable: [],
|
|
|
dataTableTwo: [],
|
|
@@ -542,7 +578,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
getKsAccountReport(params).then(res => {
|
|
|
- console.log(res)
|
|
|
if (res.compared) {
|
|
|
this.contrastDataAll = res
|
|
|
// this.drawPieAll(res)
|
|
@@ -589,44 +624,57 @@ export default {
|
|
|
params.endDate = dateValue[1]
|
|
|
}
|
|
|
// proportion
|
|
|
+ this.loading = true
|
|
|
if (this.active == 1) {
|
|
|
- getKsDetail(params).then(res => {
|
|
|
- var nDate = res.filter(item => {
|
|
|
- if (item.now) {
|
|
|
- return item.now.statDate
|
|
|
+ getReportList(params).then(res => {
|
|
|
+ if (res[0].now.length > 0) {
|
|
|
+ for (let i = 0; i < res[0].now.length; i++) {
|
|
|
+ for (let j = 0; j < res[0].yesterday.length; j++) {
|
|
|
+ if (res[0].now[i].statHour == res[0].yesterday[j].statHour) {
|
|
|
+ res[0].now[i].yesCost =
|
|
|
+ (((res[0].now[i].cost - res[0].yesterday[j].cost) / res[0].yesterday[j].cost) * 100).toFixed(2) +
|
|
|
+ '%'
|
|
|
+ res[0].now[i].yesPhotoClick =
|
|
|
+ (
|
|
|
+ ((res[0].now[i].photoClick - res[0].yesterday[j].photoClick) / res[0].yesterday[j].photoClick) *
|
|
|
+ 100
|
|
|
+ ).toFixed(2) + '%'
|
|
|
+ res[0].now[i].yesPhotoShow =
|
|
|
+ (
|
|
|
+ ((res[0].now[i].photoShow - res[0].yesterday[j].photoShow) / res[0].yesterday[j].photoShow) *
|
|
|
+ 100
|
|
|
+ ).toFixed(2) + '%'
|
|
|
+ res[0].now[i].yesAclick =
|
|
|
+ (((res[0].now[i].aclick - res[0].yesterday[j].aclick) / res[0].yesterday[j].aclick) * 100).toFixed(
|
|
|
+ 2
|
|
|
+ ) + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- console.log(nDate)
|
|
|
- this.dataTable = res.map((item, index) => {
|
|
|
- if (item.now) {
|
|
|
- console.log(item.now)
|
|
|
+ this.dataTable = res[0].now.map((item, index) => {
|
|
|
return {
|
|
|
key: index,
|
|
|
- ...item.now,
|
|
|
+ ...item,
|
|
|
statDate:
|
|
|
- this.active == 1 || this.active == 2
|
|
|
- ? item.now.statDate + ' ' + item.now.statHour + '时'
|
|
|
- : item.now.statDate,
|
|
|
- proportion: (item.now.proportion * 100).toFixed(2) + '%'
|
|
|
+ this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
|
|
|
}
|
|
|
- } else {
|
|
|
+ })
|
|
|
+ this.dataAllTableYester = res[0].yesterday.map((item, index) => {
|
|
|
return {
|
|
|
key: index,
|
|
|
- cost: 0,
|
|
|
- photoClick: 0,
|
|
|
- photoShow: 0,
|
|
|
- aclick: 0,
|
|
|
+ ...item,
|
|
|
statDate:
|
|
|
- this.active == 1 || this.active == 2
|
|
|
- ? nDate[0].now.statDate + ' ' + item.statHour + '时'
|
|
|
- : nDate[0].now.statDate,
|
|
|
- proportion: 0
|
|
|
+ this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- this.dataAllTable = this.dataTable
|
|
|
- this.dataAllTableYester = res
|
|
|
- console.log(this.dataTable)
|
|
|
+ })
|
|
|
+ this.dataAllTable = this.dataTable
|
|
|
+ this.loading = false
|
|
|
+ } else {
|
|
|
+ this.dataAllTable = null
|
|
|
+ this.dataTable = []
|
|
|
+ this.dataAllTableYester = res[0].yesterday
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
})
|
|
|
} else {
|
|
|
getReportList(params).then(res => {
|
|
@@ -638,7 +686,7 @@ export default {
|
|
|
this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
|
|
|
}
|
|
|
})
|
|
|
- // }
|
|
|
+ this.loading = false
|
|
|
})
|
|
|
}
|
|
|
},
|
|
@@ -901,27 +949,50 @@ export default {
|
|
|
this.dataTable = []
|
|
|
if (key == 'now') {
|
|
|
this.columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '升降值', dataIndex: 'proportion' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
+ { title: '时间', dataIndex: 'statDate', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '总消耗升降值',
|
|
|
+ dataIndex: 'yesCost',
|
|
|
+ scopedSlots: { customRender: 'yesCost' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '总消耗', dataIndex: 'cost', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '封面点击数升降值',
|
|
|
+ dataIndex: 'yesPhotoClick',
|
|
|
+ scopedSlots: { customRender: 'photoClickProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '封面曝光数升降值',
|
|
|
+ dataIndex: 'yesPhotoShow',
|
|
|
+ scopedSlots: { customRender: 'photoShowProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '素材曝光数升降值',
|
|
|
+ dataIndex: 'yesAclick',
|
|
|
+ scopedSlots: { customRender: 'aclickProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
|
|
|
]
|
|
|
this.dataTable = this.dataAllTable
|
|
|
} else {
|
|
|
this.columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
+ { title: '时间', dataIndex: 'statDate', align: 'center' },
|
|
|
+ { title: '总消耗', dataIndex: 'cost', align: 'center' },
|
|
|
+ { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
|
|
|
+ { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
|
|
|
+ { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
|
|
|
]
|
|
|
this.dataTable = this.dataAllTableYester.map((item, index) => {
|
|
|
return {
|
|
|
key: index,
|
|
|
...item,
|
|
|
- statDate: item.statDate + ' ' + item.statHour + '时'
|
|
|
+ statDate: item.statDate
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -955,7 +1026,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
getAdd(checked) {
|
|
|
- // console.log(this.startValue[0].moment('YYYY-MM-DD'))
|
|
|
if (checked == 9) {
|
|
|
if (this.startValue.length > 0 && this.startValue[0]) {
|
|
|
this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
|
|
@@ -965,7 +1035,6 @@ export default {
|
|
|
this.startValue = []
|
|
|
this.allValue = []
|
|
|
}
|
|
|
- console.log(checked)
|
|
|
this.active = checked
|
|
|
var arr = [
|
|
|
{
|
|
@@ -977,6 +1046,47 @@ export default {
|
|
|
tab: '昨天'
|
|
|
}
|
|
|
]
|
|
|
+ if (checked == 1) {
|
|
|
+ this.columns = [
|
|
|
+ { title: '时间', dataIndex: 'statDate', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '总消耗升降值',
|
|
|
+ dataIndex: 'yesCost',
|
|
|
+ scopedSlots: { customRender: 'yesCost' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '总消耗', dataIndex: 'cost', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '封面点击数升降值',
|
|
|
+ dataIndex: 'yesPhotoClick',
|
|
|
+ scopedSlots: { customRender: 'photoClickProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '封面曝光数升降值',
|
|
|
+ dataIndex: 'yesPhotoShow',
|
|
|
+ scopedSlots: { customRender: 'photoShowProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
|
|
|
+ {
|
|
|
+ title: '素材曝光数升降值',
|
|
|
+ dataIndex: 'yesAclick',
|
|
|
+ scopedSlots: { customRender: 'aclickProportion' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
|
|
|
+ ]
|
|
|
+ } else {
|
|
|
+ this.columns = [
|
|
|
+ { title: '时间', dataIndex: 'statDate', align: 'center' },
|
|
|
+ { title: '总消耗', dataIndex: 'cost', align: 'center' },
|
|
|
+ { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
|
|
|
+ { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
|
|
|
+ { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
var columns = []
|
|
|
switch (checked) {
|
|
|
case 1:
|
|
@@ -990,14 +1100,6 @@ export default {
|
|
|
tab: '昨天'
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '升降值', dataIndex: 'proportion' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
case 2:
|
|
|
arr = [
|
|
@@ -1006,13 +1108,6 @@ export default {
|
|
|
tab: '昨天'
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
case 3:
|
|
|
arr = [
|
|
@@ -1021,13 +1116,6 @@ export default {
|
|
|
tab: '近一周'
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
case 4:
|
|
|
arr = [
|
|
@@ -1036,13 +1124,6 @@ export default {
|
|
|
tab: '近十五天'
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
case 5:
|
|
|
arr = [
|
|
@@ -1051,13 +1132,6 @@ export default {
|
|
|
tab: '近一月'
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
case 6:
|
|
|
arr = [
|
|
@@ -1066,13 +1140,6 @@ export default {
|
|
|
tab: '近三月'
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
case 7:
|
|
|
arr = [
|
|
@@ -1081,13 +1148,6 @@ export default {
|
|
|
tab: '近半年'
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
case 8:
|
|
|
arr = [
|
|
@@ -1096,13 +1156,6 @@ export default {
|
|
|
tab: '所有'
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
case 9:
|
|
|
arr = [
|
|
@@ -1111,17 +1164,9 @@ export default {
|
|
|
tab: this.allValue[1] + ' ~ ' + this.allValue[0]
|
|
|
}
|
|
|
]
|
|
|
- columns = [
|
|
|
- { title: '时间', dataIndex: 'statDate' },
|
|
|
- { title: '总消耗', dataIndex: 'cost' },
|
|
|
- { title: '封面点击数', dataIndex: 'photoClick' },
|
|
|
- { title: '封面曝光数', dataIndex: 'photoShow' },
|
|
|
- { title: '素材曝光数', dataIndex: 'aclick' }
|
|
|
- ]
|
|
|
break
|
|
|
}
|
|
|
this.tableNowCard = arr
|
|
|
- this.columns = columns
|
|
|
this.getReportList(checked, this.allValue)
|
|
|
this.drawLine(checked, this.allValue)
|
|
|
this.getKsDetail(checked, this.allValue).then(res => {
|
|
@@ -1155,7 +1200,6 @@ export default {
|
|
|
getKsAccountReport(params).then(res => {
|
|
|
var dataNew = []
|
|
|
var dataX = []
|
|
|
- console.log(res == '')
|
|
|
if (res == '') {
|
|
|
that.kuaishou.aclick = 0
|
|
|
that.kuaishou.cost = 0
|
|
@@ -1288,7 +1332,7 @@ export default {
|
|
|
formatter: function(params) {
|
|
|
var index = dataElse.findIndex(v => v.statHour == params[0].name)
|
|
|
var da = null
|
|
|
- if (index > 0) {
|
|
|
+ if (index >= 0) {
|
|
|
da = dataElse[index].proportion
|
|
|
}
|
|
|
if (that.active == 1) {
|
|
@@ -1389,10 +1433,6 @@ export default {
|
|
|
this.drawPie('cost', res)
|
|
|
})
|
|
|
this.getReportList(1, that.allValue)
|
|
|
- // window.onresize = function() {
|
|
|
- // that.chart1.resize()
|
|
|
- // that.chart.resize()
|
|
|
- // }
|
|
|
})
|
|
|
}
|
|
|
}
|