|
@@ -65,7 +65,7 @@
|
|
|
<a-row class="image-list-heading vm-panel">
|
|
|
<div class="panel-heading">{{ title }}</div>
|
|
|
<a-row type="flex" align="middle" justify="space-between" class="panel-body">
|
|
|
- <div class="search-bar">
|
|
|
+ <div class="search-bar" style="width:100%">
|
|
|
<a-select
|
|
|
v-model="appId"
|
|
|
showSearch
|
|
@@ -73,7 +73,7 @@
|
|
|
mode="multiple"
|
|
|
placeholder="请选择账户"
|
|
|
optionFilterProp="children"
|
|
|
- style="width: 700px"
|
|
|
+ style="width: 55%"
|
|
|
@focus="handleFocus"
|
|
|
@blur="handleBlur"
|
|
|
@change="handleChange"
|
|
@@ -83,20 +83,22 @@
|
|
|
>
|
|
|
<a-select-option
|
|
|
v-for="appModel in options"
|
|
|
- :key="appModel.accountId"
|
|
|
+ :key="appModel.id+new Date().getTime()"
|
|
|
:value="appModel.accountId"
|
|
|
>
|
|
|
- <!-- <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>-->
|
|
|
{{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>
|
|
|
</a-select>
|
|
|
<a-input-number
|
|
@@ -258,6 +260,27 @@ require('echarts/lib/component/toolbox')
|
|
|
require('echarts/lib/component/legend')
|
|
|
var length = 0
|
|
|
const columns = [
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'date',
|
|
|
+ align: 'center',
|
|
|
+ customRender: function(text, record, index) {
|
|
|
+ const obj = {
|
|
|
+ children: text,
|
|
|
+ attrs: {}
|
|
|
+ }
|
|
|
+ for (let i = 0; i < length; i++) {
|
|
|
+ if (index == 0 && i == 0) {
|
|
|
+ obj.attrs.rowSpan = length
|
|
|
+ } else {
|
|
|
+ if (index == i) {
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ },
|
|
|
{ title: '账户名称', dataIndex: 'accountName', align: 'left' },
|
|
|
{
|
|
|
title: '消耗',
|
|
@@ -350,6 +373,7 @@ export default {
|
|
|
data: function() {
|
|
|
return {
|
|
|
title: '账户数据展示',
|
|
|
+ show: true,
|
|
|
data: [],
|
|
|
columns,
|
|
|
options: [],
|
|
@@ -449,14 +473,28 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
search(value) {
|
|
|
- if (value !== '') {
|
|
|
+ // console.log(value)
|
|
|
+ this.options = []
|
|
|
+ if (value != '') {
|
|
|
this.options = this.list.filter(item => {
|
|
|
var data = item.accountId + ' ' + item.authName + ' ' + item.advertiserName + ' ' + item.operationName
|
|
|
return data.toLowerCase().indexOf(value.toLowerCase()) > -1
|
|
|
})
|
|
|
+ this.options = [...this.options]
|
|
|
console.log(this.options)
|
|
|
} else {
|
|
|
- this.options = this.list
|
|
|
+ if (this.appId.length > 0) {
|
|
|
+ this.options = []
|
|
|
+ for (let i = 0; i < this.list.length; i++) {
|
|
|
+ for (let j = 0; j < this.appId.length; j++) {
|
|
|
+ if (this.list[i].accountId == this.appId[j]) {
|
|
|
+ this.options.push(this.list[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.options = this.list
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
addUser() {
|
|
@@ -494,6 +532,7 @@ export default {
|
|
|
params.accountIds = JSON.stringify(this.appId)
|
|
|
params.type = this.active
|
|
|
params.statHour = this.statHour
|
|
|
+ params.discount = this.discount
|
|
|
if (this.active == 9) {
|
|
|
params.startDate = dateValue[0]
|
|
|
params.endDate = dateValue[1]
|
|
@@ -509,9 +548,10 @@ export default {
|
|
|
photoClickRatio: item.photoClickRatio ? (item.photoClickRatio * 100).toFixed(2) + '%' : 0 + '%',
|
|
|
cpm: item.cpm ? '¥' + item.cpm.toFixed(2) : '¥' + 0,
|
|
|
cost: '¥' + item.cost.toFixed(2),
|
|
|
- cvr: item.cvr ? item.cvr.toFixed(2) + '%' : 0 + '%',
|
|
|
+ cvr: item.cvr ? (item.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
|
costY: '¥' + (item.cost / this.discount).toFixed(2),
|
|
|
- formPrice: item.formPrice ? item.formPrice : 0
|
|
|
+ formPrice: item.formPrice ? '¥' + (item.formPrice / this.discount).toFixed(2) : '¥' + 0,
|
|
|
+ date: this.statHour ? this.getDate() + ' ' + this.statHour : this.getDate()
|
|
|
}
|
|
|
})
|
|
|
var index = this.data.length
|
|
@@ -522,10 +562,10 @@ export default {
|
|
|
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),
|
|
|
- cvr: res.now.cvr ? res.now.cvr.toFixed(2) + '%' : 0 + '%',
|
|
|
+ cvr: res.now.cvr ? (res.now.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
|
costY: '¥' + (res.now.cost / this.discount).toFixed(2),
|
|
|
accountName: '总计',
|
|
|
- formPrice: res.now.formPrice ? res.now.formPrice : 0
|
|
|
+ formPrice: res.now.formPrice ? '¥' + (res.now.formPrice / this.discount).toFixed(2) : '¥' + 0
|
|
|
}
|
|
|
var allYesterday = {
|
|
|
key: index + 2,
|
|
@@ -535,10 +575,10 @@ export default {
|
|
|
: 0 + '%',
|
|
|
cpm: res.yesterday.cpm ? '¥' + res.yesterday.cpm.toFixed(2) : '¥' + 0,
|
|
|
cost: '¥' + res.yesterday.cost.toFixed(2),
|
|
|
- cvr: res.yesterday.cvr ? res.yesterday.cvr.toFixed(2) + '%' : 0 + '%',
|
|
|
+ cvr: res.yesterday.cvr ? (res.yesterday.cvr * 100).toFixed(2) + '%' : 0 + '%',
|
|
|
costY: '¥' + (res.yesterday.cost / this.discount).toFixed(2),
|
|
|
accountName: '昨日总计',
|
|
|
- formPrice: res.now.yesterday ? res.now.yesterday : 0
|
|
|
+ formPrice: res.yesterday.formPrice ? '¥' + (res.yesterday.formPrice / this.discount).toFixed(2) : '¥' + 0
|
|
|
}
|
|
|
var chainRatio = {
|
|
|
key: index + 3,
|
|
@@ -817,8 +857,7 @@ export default {
|
|
|
chart.resize()
|
|
|
}
|
|
|
},
|
|
|
- exportExcel() {
|
|
|
- var title = ''
|
|
|
+ getDate() {
|
|
|
let date = new Date()
|
|
|
let y = date.getFullYear()
|
|
|
let MM = date.getMonth() + 1
|
|
@@ -827,55 +866,75 @@ export default {
|
|
|
d = d < 10 ? '0' + d : d
|
|
|
let h = date.getHours() - 1
|
|
|
h = h < 10 ? '0' + h : h
|
|
|
- if (this.statHour) {
|
|
|
- title = y + '-' + MM + '-' + d + ' ' + this.statHour + '时数据报表'
|
|
|
+ if (this.active == 1) {
|
|
|
+ if (this.statHour) {
|
|
|
+ return y + '-' + MM + '-' + d
|
|
|
+ } else {
|
|
|
+ return y + '-' + MM + '-' + d + ' ' + h
|
|
|
+ }
|
|
|
} else {
|
|
|
- title = y + '-' + MM + '-' + d + ' ' + h + '时数据报表'
|
|
|
+ return y + '-' + MM + '-' + (d - 1)
|
|
|
}
|
|
|
- var opt = {
|
|
|
- rowIndex: 4
|
|
|
- } //开头空4行
|
|
|
- var sheet = XLSX2.utils.table_to_sheet(document.getElementById('outTable'), opt)
|
|
|
- sheet['A1'] = {
|
|
|
- t: 's',
|
|
|
- v: title
|
|
|
- } //给A1单元格赋值
|
|
|
- sheet['A5'].s = {
|
|
|
- alignment: {
|
|
|
- horizontal: 'center',
|
|
|
- vertical: 'center',
|
|
|
- wrap_text: true
|
|
|
- },
|
|
|
+ },
|
|
|
+ exportExcel() {
|
|
|
+ var title = ''
|
|
|
+ if (this.active == 1) {
|
|
|
+ if (this.statHour) {
|
|
|
+ title = this.getDate() + ' ' + this.statHour + '时数据报表'
|
|
|
+ } else {
|
|
|
+ title = this.getDate() + '时数据报表'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ title = this.getDate() + '数据报表'
|
|
|
+ }
|
|
|
+ // var opt = {
|
|
|
+ // rowIndex: 4
|
|
|
+ // } //开头空4行
|
|
|
+ var sheet = XLSX2.utils.table_to_sheet(document.getElementById('outTable'))
|
|
|
+ sheet['A2'].s = {
|
|
|
font: {
|
|
|
name: '宋体',
|
|
|
- sz: 24,
|
|
|
- bold: true,
|
|
|
- underline: true,
|
|
|
- color: {
|
|
|
- rgb: 'FFFFAA00'
|
|
|
- }
|
|
|
+ sz: 18,
|
|
|
+ color: { rgb: 'ff0000' },
|
|
|
+ bold: true
|
|
|
+ // italic: false,
|
|
|
+ // underline: false
|
|
|
+ },
|
|
|
+ alignment: {
|
|
|
+ horizontal: 'center',
|
|
|
+ vertical: 'center'
|
|
|
}
|
|
|
+ // fill: {
|
|
|
+ // fgColor: {rgb: "008000"},
|
|
|
+ // },
|
|
|
}
|
|
|
- console.log(sheet['A5'])
|
|
|
+ // sheet['A1'] = {
|
|
|
+ // t: 's',
|
|
|
+ // v: '表格导出'
|
|
|
+ // } //给A1单元格赋值
|
|
|
+ console.log(sheet)
|
|
|
//["!merges"]这个属性是专门用来进行单元格合并的
|
|
|
- sheet['!merges'].push({
|
|
|
- //如果不为空push 为空 = 赋值
|
|
|
- //合并单元格 index都从0开始
|
|
|
- s: {
|
|
|
- //s开始
|
|
|
- c: 0, //开始列
|
|
|
- r: 0 //开始行
|
|
|
- },
|
|
|
- e: {
|
|
|
- //e结束
|
|
|
- c: 12, //结束列
|
|
|
- r: 3 //结束行
|
|
|
- }
|
|
|
- })
|
|
|
+ // sheet['!merges'].push({
|
|
|
+ // //如果不为空push 为空 = 赋值
|
|
|
+ // //合并单元格 index都从0开始
|
|
|
+ // s: {
|
|
|
+ // //s开始
|
|
|
+ // c: 0, //开始列
|
|
|
+ // r: 0 //开始行
|
|
|
+ // },
|
|
|
+ // e: {
|
|
|
+ // //e结束
|
|
|
+ // c: 12, //结束列
|
|
|
+ // r: 3 //结束行
|
|
|
+ // }
|
|
|
+ // })
|
|
|
|
|
|
sheet['!cols'] = [
|
|
|
{
|
|
|
- wpx: 200
|
|
|
+ wpx: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ wpx: 100
|
|
|
},
|
|
|
{
|
|
|
wpx: 100
|