|
@@ -59,6 +59,9 @@
|
|
top: 65px;
|
|
top: 65px;
|
|
right: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
|
|
+th div {
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|
|
<template>
|
|
<template>
|
|
<div class="data-display-statistics">
|
|
<div class="data-display-statistics">
|
|
@@ -66,6 +69,7 @@
|
|
<div class="panel-heading">{{ title }}</div>
|
|
<div class="panel-heading">{{ title }}</div>
|
|
<a-row type="flex" align="middle" justify="space-between" class="panel-body">
|
|
<a-row type="flex" align="middle" justify="space-between" class="panel-body">
|
|
<div class="search-bar" style="width:100%">
|
|
<div class="search-bar" style="width:100%">
|
|
|
|
+ <span>账户选择:</span>
|
|
<a-select
|
|
<a-select
|
|
v-model="appId"
|
|
v-model="appId"
|
|
showSearch
|
|
showSearch
|
|
@@ -73,7 +77,7 @@
|
|
mode="multiple"
|
|
mode="multiple"
|
|
placeholder="请选择账户"
|
|
placeholder="请选择账户"
|
|
optionFilterProp="children"
|
|
optionFilterProp="children"
|
|
- style="width: 55%"
|
|
|
|
|
|
+ style="width: 50%"
|
|
@focus="handleFocus"
|
|
@focus="handleFocus"
|
|
@blur="handleBlur"
|
|
@blur="handleBlur"
|
|
@change="handleChange"
|
|
@change="handleChange"
|
|
@@ -85,22 +89,9 @@
|
|
v-for="appModel in options"
|
|
v-for="appModel in options"
|
|
:key="appModel.id+new Date().getTime()"
|
|
:key="appModel.id+new Date().getTime()"
|
|
:value="appModel.accountId"
|
|
:value="appModel.accountId"
|
|
- >
|
|
|
|
- {{appModel.advertiserName}}  {{appModel.accountId}}   {{appModel.authName}}  {{appModel.operationName}}
|
|
|
|
- <!-- <div v-if="show">
|
|
|
|
- <div
|
|
|
|
- style="width:220px;text-align:right;display:inline-block"
|
|
|
|
- >{{appModel.advertiserName}}</div>
|
|
|
|
- <div
|
|
|
|
- style="width:100px;text-align:center;display:inline-block;margin-right:30px"
|
|
|
|
- >{{appModel.accountId}}</div>
|
|
|
|
- <div style="width:150px;text-align:left;display:inline-block">{{appModel.authName}}</div>
|
|
|
|
- <div
|
|
|
|
- style="width:100px;text-align:center;display:inline-block"
|
|
|
|
- >{{appModel.operationName}}</div>
|
|
|
|
- </div>-->
|
|
|
|
- </a-select-option>
|
|
|
|
|
|
+ >{{appModel.advertiserName}}  {{appModel.accountId}}   {{appModel.authName}}  {{appModel.operationName}}</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
|
|
+ <span style="margin-left:10px">返点比例:</span>
|
|
<a-input-number
|
|
<a-input-number
|
|
:min="1"
|
|
:min="1"
|
|
:max="10"
|
|
:max="10"
|
|
@@ -110,6 +101,12 @@
|
|
style="width:100px"
|
|
style="width:100px"
|
|
/>
|
|
/>
|
|
<a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
|
|
<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>
|
|
</div>
|
|
</a-row>
|
|
</a-row>
|
|
<a-row>
|
|
<a-row>
|
|
@@ -220,12 +217,7 @@
|
|
<a-col :span="24">
|
|
<a-col :span="24">
|
|
<a-card style="width:100%;">
|
|
<a-card style="width:100%;">
|
|
<div style="display:flex;margin-bottom:15px" v-show="active==1||active==2">
|
|
<div style="display:flex;margin-bottom:15px" v-show="active==1||active==2">
|
|
- <a-select
|
|
|
|
- style="width: 120px"
|
|
|
|
- v-model="statHour"
|
|
|
|
- @change="getElseData"
|
|
|
|
- allowClear
|
|
|
|
- >
|
|
|
|
|
|
+ <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-option v-for="item of 24" :key="item-1" :value="item-1">{{item-1}}</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
<a-button type="primary" @click="exportExcel" style="margin-left:15px">导出</a-button>
|
|
<a-button type="primary" @click="exportExcel" style="margin-left:15px">导出</a-button>
|
|
@@ -302,7 +294,7 @@ const columns = [
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '账户名称',
|
|
|
|
|
|
+ title: '账户昵称',
|
|
dataIndex: 'accountName',
|
|
dataIndex: 'accountName',
|
|
scopedSlots: { customRender: 'cost' },
|
|
scopedSlots: { customRender: 'cost' },
|
|
align: 'center',
|
|
align: 'center',
|
|
@@ -323,13 +315,13 @@ const columns = [
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '消耗',
|
|
|
|
|
|
+ title: '消耗(¥)',
|
|
dataIndex: 'cost',
|
|
dataIndex: 'cost',
|
|
scopedSlots: { customRender: 'cost' },
|
|
scopedSlots: { customRender: 'cost' },
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '折后消耗',
|
|
|
|
|
|
+ title: '折后消耗(¥)',
|
|
dataIndex: 'costY',
|
|
dataIndex: 'costY',
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
@@ -374,8 +366,13 @@ const columns = [
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '转化单价',
|
|
|
|
- dataIndex: 'formPrice',
|
|
|
|
|
|
+ title: '折前转化单价(¥)',
|
|
|
|
+ dataIndex: 'beforeFormPrice',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '折后转化单价(¥)',
|
|
|
|
+ dataIndex: 'afterFormPrice',
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -537,6 +534,11 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ getDataReset() {
|
|
|
|
+ this.active = 1
|
|
|
|
+ this.allValue = []
|
|
|
|
+ this.addUser()
|
|
|
|
+ },
|
|
addUser() {
|
|
addUser() {
|
|
var that = this
|
|
var that = this
|
|
if (this.appId.length > 0) {
|
|
if (this.appId.length > 0) {
|
|
@@ -585,15 +587,20 @@ export default {
|
|
key: index,
|
|
key: index,
|
|
...item,
|
|
...item,
|
|
photoClickRatio: item.photoClickRatio ? (item.photoClickRatio * 100).toFixed(2) + '%' : 0 + '%',
|
|
photoClickRatio: item.photoClickRatio ? (item.photoClickRatio * 100).toFixed(2) + '%' : 0 + '%',
|
|
- cpm: item.cpm ? '¥' + item.cpm.toFixed(2) : '¥' + 0,
|
|
|
|
- cost: '¥' + item.cost.toFixed(2),
|
|
|
|
|
|
+ cpm: item.cpm ? item.cpm.toFixed(2) : 0,
|
|
|
|
+ cost: item.cost.toFixed(2),
|
|
cvr: item.cvr ? (item.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
cvr: item.cvr ? (item.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
- costY: '¥' + (item.cost / this.discount).toFixed(2),
|
|
|
|
- formPrice: item.formPrice
|
|
|
|
- ? '¥' + (item.formPrice / this.discount).toFixed(2)
|
|
|
|
|
|
+ costY: (item.cost / this.discount).toFixed(2),
|
|
|
|
+ beforeFormPrice: item.formPrice
|
|
|
|
+ ? item.formPrice.toFixed(2)
|
|
|
|
+ : item.activationPrice
|
|
|
|
+ ? item.activationPrice.toFixed(2)
|
|
|
|
+ : 0,
|
|
|
|
+ afterFormPrice: item.formPrice
|
|
|
|
+ ? (item.formPrice / this.discount).toFixed(2)
|
|
: item.activationPrice
|
|
: item.activationPrice
|
|
- ? '¥' + (item.activationPrice / this.discount).toFixed(2)
|
|
|
|
- : '¥' + 0,
|
|
|
|
|
|
+ ? (item.activationPrice / this.discount).toFixed(2)
|
|
|
|
+ : 0,
|
|
date: this.statHour ? this.getDate() + ' ' + this.statHour : this.getDate(),
|
|
date: this.statHour ? this.getDate() + ' ' + this.statHour : this.getDate(),
|
|
formCount: item.formCount > 0 ? item.formCount : item.activationCount
|
|
formCount: item.formCount > 0 ? item.formCount : item.activationCount
|
|
}
|
|
}
|
|
@@ -604,16 +611,21 @@ export default {
|
|
key: index + 1,
|
|
key: index + 1,
|
|
...res.now,
|
|
...res.now,
|
|
photoClickRatio: res.now.photoClickRatio ? (res.now.photoClickRatio * 100).toFixed(2) + '%' : 0 + '%',
|
|
photoClickRatio: res.now.photoClickRatio ? (res.now.photoClickRatio * 100).toFixed(2) + '%' : 0 + '%',
|
|
- cpm: res.now.cpm ? '¥' + res.now.cpm.toFixed(2) : '¥' + 0,
|
|
|
|
- cost: '¥' + res.now.cost.toFixed(2),
|
|
|
|
|
|
+ cpm: res.now.cpm ? res.now.cpm.toFixed(2) : 0,
|
|
|
|
+ cost: res.now.cost.toFixed(2),
|
|
cvr: res.now.cvr ? (res.now.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
cvr: res.now.cvr ? (res.now.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
- costY: '¥' + (res.now.cost / this.discount).toFixed(2),
|
|
|
|
|
|
+ costY: (res.now.cost / this.discount).toFixed(2),
|
|
accountId: '总计',
|
|
accountId: '总计',
|
|
- formPrice: res.now.formPrice
|
|
|
|
- ? '¥' + (res.now.formPrice / this.discount).toFixed(2)
|
|
|
|
|
|
+ beforeFormPrice: res.now.formPrice
|
|
|
|
+ ? res.now.formPrice.toFixed(2)
|
|
|
|
+ : res.now.activationPrice
|
|
|
|
+ ? res.now.activationPrice.toFixed(2)
|
|
|
|
+ : 0,
|
|
|
|
+ afterFormPrice: res.now.formPrice
|
|
|
|
+ ? (res.now.formPrice / this.discount).toFixed(2)
|
|
: res.now.activationPrice
|
|
: res.now.activationPrice
|
|
- ? '¥' + (res.now.activationPrice / this.discount).toFixed(2)
|
|
|
|
- : '¥' + 0,
|
|
|
|
|
|
+ ? (res.now.activationPrice / this.discount).toFixed(2)
|
|
|
|
+ : 0,
|
|
formCount: res.now.formCount > 0 ? res.now.formCount : res.now.activationCount
|
|
formCount: res.now.formCount > 0 ? res.now.formCount : res.now.activationCount
|
|
}
|
|
}
|
|
var allYesterday = {
|
|
var allYesterday = {
|
|
@@ -622,16 +634,21 @@ export default {
|
|
photoClickRatio: res.yesterday.photoClickRatio
|
|
photoClickRatio: res.yesterday.photoClickRatio
|
|
? (res.yesterday.photoClickRatio * 100).toFixed(2) + '%'
|
|
? (res.yesterday.photoClickRatio * 100).toFixed(2) + '%'
|
|
: 0 + '%',
|
|
: 0 + '%',
|
|
- cpm: res.yesterday.cpm ? '¥' + res.yesterday.cpm.toFixed(2) : '¥' + 0,
|
|
|
|
- cost: '¥' + res.yesterday.cost.toFixed(2),
|
|
|
|
|
|
+ cpm: res.yesterday.cpm ? res.yesterday.cpm.toFixed(2) : 0,
|
|
|
|
+ cost: res.yesterday.cost.toFixed(2),
|
|
cvr: res.yesterday.cvr ? (res.yesterday.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
cvr: res.yesterday.cvr ? (res.yesterday.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
- costY: '¥' + (res.yesterday.cost / this.discount).toFixed(2),
|
|
|
|
|
|
+ costY: (res.yesterday.cost / this.discount).toFixed(2),
|
|
accountId: '昨日总计',
|
|
accountId: '昨日总计',
|
|
- formPrice: res.yesterday.formPrice
|
|
|
|
- ? '¥' + (res.yesterday.formPrice / this.discount).toFixed(2)
|
|
|
|
|
|
+ beforeFormPrice: res.yesterday.formPrice
|
|
|
|
+ ? res.yesterday.formPrice.toFixed(2)
|
|
: res.yesterday.activationPrice
|
|
: res.yesterday.activationPrice
|
|
- ? '¥' + (res.yesterday.activationPrice / this.discount).toFixed(2)
|
|
|
|
- : '¥' + 0,
|
|
|
|
|
|
+ ? res.yesterday.activationPrice.toFixed(2)
|
|
|
|
+ : 0,
|
|
|
|
+ afterFormPrice: res.yesterday.formPrice
|
|
|
|
+ ? (res.yesterday.formPrice / this.discount).toFixed(2)
|
|
|
|
+ : res.yesterday.activationPrice
|
|
|
|
+ ? (res.yesterday.activationPrice / this.discount).toFixed(2)
|
|
|
|
+ : 0,
|
|
formCount: res.yesterday.formCount > 0 ? res.yesterday.formCount : res.yesterday.activationCount
|
|
formCount: res.yesterday.formCount > 0 ? res.yesterday.formCount : res.yesterday.activationCount
|
|
}
|
|
}
|
|
var chainRatio = {
|
|
var chainRatio = {
|
|
@@ -651,11 +668,18 @@ export default {
|
|
: res.chainRatio.activationCountProportion
|
|
: res.chainRatio.activationCountProportion
|
|
? (res.chainRatio.activationCountProportion * 100).toFixed(2) + '%'
|
|
? (res.chainRatio.activationCountProportion * 100).toFixed(2) + '%'
|
|
: 0 + '%',
|
|
: 0 + '%',
|
|
- formPrice: res.chainRatio.formPriceProportion
|
|
|
|
- ? (res.chainRatio.formPriceProportion * 100).toFixed(2) + '%'
|
|
|
|
- : res.chainRatio.activationPriceProportion
|
|
|
|
- ? (res.chainRatio.activationPriceProportion * 100).toFixed(2) + '%'
|
|
|
|
|
|
+ beforeFormPrice: res.chainRatio.beforeFormPriceProportion
|
|
|
|
+ ? (res.chainRatio.beforeFormPriceProportion * 100).toFixed(2) + '%'
|
|
|
|
+ : res.chainRatio.beforeActivationPriceProportion
|
|
|
|
+ ? (res.chainRatio.beforeActivationPriceProportion * 100).toFixed(2) + '%'
|
|
|
|
+ : 0 + '%',
|
|
|
|
+
|
|
|
|
+ afterFormPrice: res.chainRatio.afterFormPriceProportion
|
|
|
|
+ ? (res.chainRatio.afterFormPriceProportion * 100).toFixed(2) + '%'
|
|
|
|
+ : res.chainRatio.afterActivationPriceProportion
|
|
|
|
+ ? (res.chainRatio.afterActivationPriceProportion * 100).toFixed(2) + '%'
|
|
: 0 + '%',
|
|
: 0 + '%',
|
|
|
|
+
|
|
costY: (res.chainRatio.costProportion * 100).toFixed(2) + '%',
|
|
costY: (res.chainRatio.costProportion * 100).toFixed(2) + '%',
|
|
accountId: '环比'
|
|
accountId: '环比'
|
|
}
|
|
}
|
|
@@ -946,32 +970,67 @@ export default {
|
|
} else {
|
|
} else {
|
|
title = this.getDate() + '数据报表'
|
|
title = this.getDate() + '数据报表'
|
|
}
|
|
}
|
|
|
|
+ const borderAll = {
|
|
|
|
+ //单元格外侧框线
|
|
|
|
+ top: {
|
|
|
|
+ style: 'thin'
|
|
|
|
+ },
|
|
|
|
+ bottom: {
|
|
|
|
+ style: 'thin'
|
|
|
|
+ },
|
|
|
|
+ left: {
|
|
|
|
+ style: 'thin'
|
|
|
|
+ },
|
|
|
|
+ right: {
|
|
|
|
+ style: 'thin'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
// var opt = {
|
|
// var opt = {
|
|
// rowIndex: 4
|
|
// rowIndex: 4
|
|
// } //开头空4行
|
|
// } //开头空4行
|
|
var sheet = XLSX2.utils.table_to_sheet(document.getElementById('outTable'))
|
|
var sheet = XLSX2.utils.table_to_sheet(document.getElementById('outTable'))
|
|
- sheet['A2'].s = {
|
|
|
|
- font: {
|
|
|
|
- name: '宋体',
|
|
|
|
- sz: 18,
|
|
|
|
- color: { rgb: 'ff0000' },
|
|
|
|
- bold: true
|
|
|
|
- // italic: false,
|
|
|
|
- // underline: false
|
|
|
|
- },
|
|
|
|
- alignment: {
|
|
|
|
- horizontal: 'center',
|
|
|
|
- vertical: 'center'
|
|
|
|
|
|
+ var sheetName = ['D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O']
|
|
|
|
+ // sheet['A2'].s = {
|
|
|
|
+ // alignment: {
|
|
|
|
+ // horizontal: 'center',
|
|
|
|
+ // vertical: 'center'
|
|
|
|
+ // }
|
|
|
|
+ // // fill: {
|
|
|
|
+ // // fgColor: {rgb: "008000"},
|
|
|
|
+ // // },
|
|
|
|
+ // }
|
|
|
|
+ // for (let i = 0; i < 3; i++) {
|
|
|
|
+ // sheet['B' + (length + 1 - i)].s = {
|
|
|
|
+ // alignment: {
|
|
|
|
+ // horizontal: 'center',
|
|
|
|
+ // vertical: 'center'
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // for (let i = 0; i < sheetName.length; i++) {
|
|
|
|
+ // for (let j = 2; j < length + 2; j++) {
|
|
|
|
+ // console.log(sheetName[i] + j + '')
|
|
|
|
+ // var a = sheetName[i] + j + ''
|
|
|
|
+ // console.log(a)
|
|
|
|
+ // sheet[a].t = 'n'
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ for (var i in sheet) {
|
|
|
|
+ if (i == '!ref' || i == '!merges' || i == '!cols') {
|
|
|
|
+ } else {
|
|
|
|
+ sheet[i + ''].s = {
|
|
|
|
+ border: borderAll,
|
|
|
|
+ alignment: {
|
|
|
|
+ horizontal: 'center',
|
|
|
|
+ vertical: 'center'
|
|
|
|
+ }
|
|
|
|
+ // fill: {
|
|
|
|
+ // fgColor: { rgb: 'FFFF00' }
|
|
|
|
+ // }
|
|
|
|
+ }
|
|
|
|
+ sheet[i + ''].t = 'n'
|
|
}
|
|
}
|
|
- // fill: {
|
|
|
|
- // fgColor: {rgb: "008000"},
|
|
|
|
- // },
|
|
|
|
}
|
|
}
|
|
- // sheet['A1'] = {
|
|
|
|
- // t: 's',
|
|
|
|
- // v: '表格导出'
|
|
|
|
- // } //给A1单元格赋值
|
|
|
|
- console.log(sheet)
|
|
|
|
//["!merges"]这个属性是专门用来进行单元格合并的
|
|
//["!merges"]这个属性是专门用来进行单元格合并的
|
|
// sheet['!merges'].push({
|
|
// sheet['!merges'].push({
|
|
// //如果不为空push 为空 = 赋值
|
|
// //如果不为空push 为空 = 赋值
|
|
@@ -1033,10 +1092,13 @@ export default {
|
|
},
|
|
},
|
|
{
|
|
{
|
|
wpx: 100
|
|
wpx: 100
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ wpx: 100
|
|
}
|
|
}
|
|
] //单元格列宽
|
|
] //单元格列宽
|
|
|
|
|
|
- openDownloadDialog(sheet2blob(sheet), title + '.xlsx')
|
|
|
|
|
|
+ openDownloadDialog(sheet2blob(sheet), title + '.csv')
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {},
|
|
watch: {},
|