|
@@ -12,7 +12,7 @@
|
|
|
:allowClear="false"
|
|
|
format="YYYY-MM-DD"
|
|
|
:disabled-date="disabledDate"
|
|
|
- @change="handleCostTimeChange"
|
|
|
+ @change="handleCostTimeChange"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="costInfo">
|
|
@@ -22,18 +22,21 @@
|
|
|
</div>
|
|
|
<a-divider type="vertical"/>
|
|
|
<div class="tongbi">
|
|
|
- <div style="margin-bottom:8px;margin-left: 23px;">
|
|
|
+ <div style="margin-bottom:8px;margin-left: 10px;">
|
|
|
同比
|
|
|
<a-tooltip >
|
|
|
<template slot="title">
|
|
|
<span>截止此时今日与昨日的花费同比</span>
|
|
|
</template>
|
|
|
- <a-icon type="question-circle" />
|
|
|
+ <a-icon type="question-circle"/>
|
|
|
</a-tooltip>
|
|
|
</div>
|
|
|
- <div style="font-size:14px;font-weight:600">
|
|
|
- <a-icon type="arrow-down" style="color: #f00"/>
|
|
|
- {{ yearCostReportList.compare || 0 }}
|
|
|
+ <div style="font-size:14px;font-weight:600;text-align: end;">
|
|
|
+ <span class="sign">
|
|
|
+ <a-icon v-if="Number(yearCostReportList.compare) >= 0" type="rise" class="rise"/>
|
|
|
+ <a-icon v-if="Number(yearCostReportList.compare) < 0" type="fall" class="fall"/>
|
|
|
+ </span>
|
|
|
+ {{ yearCostReportList.compare ? yearCostReportList.compare + '%' : '-' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -63,7 +66,8 @@
|
|
|
<div class="top">
|
|
|
<div class="item" v-for="item in throwColumns" :key="item.dataIndex">
|
|
|
<div class="todyCost">
|
|
|
- <span v-if="item.type === 'double'">{{ Number(item.today) | decimalsHandle }}</span>
|
|
|
+ <span v-if="item.type === 'spend'">{{ Number(item.today) | decimalsHandle }}</span>
|
|
|
+ <span v-else-if="item.type === 'double'">{{ Number(item.today) | decimalsHandle }}</span>
|
|
|
<span v-else-if="item.type === 'string'">{{ Number(item.today) | decimalsHandle }}</span>
|
|
|
<span v-else-if="item.type === 'int'">{{ item.today !== 0 ? item.today + '%' : 0 }}</span>
|
|
|
<span class="sign">
|
|
@@ -73,7 +77,8 @@
|
|
|
</div>
|
|
|
<div class="yesterdayCost">
|
|
|
<span>/ 昨日: </span>
|
|
|
- <span v-if="item.type === 'double'">{{ Number(item.yesterday) | decimalsHandle }}</span>
|
|
|
+ <span v-if="item.type === 'spend'">{{ Number(item.yesterday) | decimalsHandle }}</span>
|
|
|
+ <span v-else-if="item.type === 'double'">{{ Number(item.yesterday) | decimalsHandle }}</span>
|
|
|
<span v-else-if="item.type === 'string'">{{ Number(item.yesterday) | decimalsHandle }}</span>
|
|
|
<span v-else-if="item.type === 'int'">{{ item.yesterday !== 0 ? item.yesterday + '%' : 0 }}</span>
|
|
|
</div>
|
|
@@ -94,6 +99,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="echart" style="margin-top:20px;position:relative">
|
|
|
+ <div style="position:absolute;right:5px;top:-15px">
|
|
|
+ 更新时间:{{ yearCostReportList.updTime || '-' }}
|
|
|
+ </div>
|
|
|
<a-spin :spinning="accountIndexEchartSpinning">
|
|
|
<div
|
|
|
class="accountIndexEchart"
|
|
@@ -136,6 +144,7 @@
|
|
|
<div class="title">
|
|
|
<div class="titleContext">
|
|
|
投放数据
|
|
|
+ <span class="titleTip">更新时间:{{ planData.length ? planData[0].updateTime : '-' }}</span>
|
|
|
</div>
|
|
|
<div style="float: right;margin-top: -23px;">
|
|
|
<a-range-picker
|
|
@@ -152,6 +161,7 @@
|
|
|
:columns="planColumns"
|
|
|
:data-source="planData"
|
|
|
:pagination="false"
|
|
|
+ :scroll="{x: 1500}"
|
|
|
>
|
|
|
<span slot="optStatus" slot-scope="text, record">
|
|
|
<a-switch :checked="text === 'AD_STATUS_ENABLE'" @change="handleSwitchChang($event, record)"/>
|
|
@@ -194,13 +204,16 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="titleContext source-material"> 素材相关</div>
|
|
|
+ <div class="titleContext source-material">
|
|
|
+ 素材相关
|
|
|
+ <span class="titleTip">更新时间:{{ materialData.length ? materialData[0].updateTime : '-' }}</span></div>
|
|
|
<div class="materialBodyRight">
|
|
|
<div class="material-table-class">
|
|
|
<a-table
|
|
|
:columns="materialColumns"
|
|
|
:data-source="materialData"
|
|
|
:pagination="false"
|
|
|
+ :scroll="{x: 1500}"
|
|
|
>
|
|
|
<span slot="posterUrl" slot-scope="text,record">
|
|
|
<div style="background:#e8e8e8;text-align:center;border-radius:3px">
|
|
@@ -300,7 +313,7 @@
|
|
|
:label-col="labelCol"
|
|
|
:wrapper-col="wrapperCol"
|
|
|
>
|
|
|
- <a-form-model-item label="调价" prop="budget">
|
|
|
+ <a-form-model-item label="出价" prop="budget">
|
|
|
<a-input-number v-model="budgetForm.budget"/> 元
|
|
|
</a-form-model-item>
|
|
|
</a-form-model>
|
|
@@ -354,6 +367,14 @@ export default {
|
|
|
accountVisible: false,
|
|
|
throwColumns: [
|
|
|
{
|
|
|
+ title: '花费',
|
|
|
+ dataIndex: 'spendCost',
|
|
|
+ key: 'spendCost',
|
|
|
+ today: 0,
|
|
|
+ yesterday: 0,
|
|
|
+ type: 'spend'
|
|
|
+ },
|
|
|
+ {
|
|
|
title: '转化成本',
|
|
|
dataIndex: 'activationCost',
|
|
|
key: 'activationCost',
|
|
@@ -389,9 +410,9 @@ export default {
|
|
|
newLink: '',
|
|
|
linkVisible: false,
|
|
|
targetVisible: false,
|
|
|
- isActive: 'activationCost',
|
|
|
+ isActive: 'spendCost',
|
|
|
moment,
|
|
|
- materialDate: [],
|
|
|
+ materialDate: [moment().subtract(1,'days').format('YYYY-MM-DD'), moment().subtract(1,'days').format('YYYY-MM-DD')],
|
|
|
dateValue: [],
|
|
|
planData: [],
|
|
|
planPagin: {
|
|
@@ -404,13 +425,14 @@ export default {
|
|
|
dataIndex: 'adName',
|
|
|
key: 'adName',
|
|
|
align: 'center',
|
|
|
- width: 120
|
|
|
+ width: 240
|
|
|
},
|
|
|
{
|
|
|
title: '花费',
|
|
|
dataIndex: 'cost',
|
|
|
key: 'cost',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.cost - b.cost
|
|
|
},
|
|
|
{
|
|
@@ -418,6 +440,7 @@ export default {
|
|
|
dataIndex: 'cpaBid',
|
|
|
key: 'cpaBid',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.cpaBid - b.cpaBid
|
|
|
},
|
|
|
{
|
|
@@ -425,6 +448,7 @@ export default {
|
|
|
dataIndex: 'showNum',
|
|
|
key: 'showNum',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.showNum - b.showNum
|
|
|
},
|
|
|
{
|
|
@@ -432,6 +456,7 @@ export default {
|
|
|
dataIndex: 'averageShow',
|
|
|
key: 'averageShow',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.averageShow - b.averageShow
|
|
|
},
|
|
|
{
|
|
@@ -439,6 +464,7 @@ export default {
|
|
|
dataIndex: 'click',
|
|
|
key: 'click',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.click - b.click
|
|
|
},
|
|
|
{
|
|
@@ -446,6 +472,7 @@ export default {
|
|
|
dataIndex: 'averageClick',
|
|
|
key: 'averageClick',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.averageClick - b.averageClick
|
|
|
},
|
|
|
{
|
|
@@ -453,6 +480,7 @@ export default {
|
|
|
dataIndex: 'clickRate',
|
|
|
key: 'clickRate',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
|
|
|
},
|
|
|
{
|
|
@@ -460,6 +488,7 @@ export default {
|
|
|
dataIndex: 'convertNum',
|
|
|
key: 'convertNum',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.convertNum - b.convertNum
|
|
|
},
|
|
|
{
|
|
@@ -467,6 +496,7 @@ export default {
|
|
|
dataIndex: 'converRate',
|
|
|
key: 'converRate',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.converRate.split('%')[0] - b.converRate.split('%')[0]
|
|
|
},
|
|
|
{
|
|
@@ -474,19 +504,22 @@ export default {
|
|
|
dataIndex: 'conver',
|
|
|
key: 'conver',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.conver - b.conver
|
|
|
},
|
|
|
{
|
|
|
- title: '环比',
|
|
|
+ title: '同比',
|
|
|
dataIndex: 'compare',
|
|
|
key: 'compare',
|
|
|
- align: 'center'
|
|
|
+ align: 'center',
|
|
|
+ width: 180
|
|
|
},
|
|
|
{
|
|
|
title: '状态',
|
|
|
dataIndex: 'optStatus',
|
|
|
key: 'optStatus',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
scopedSlots: {customRender: 'optStatus'}
|
|
|
},
|
|
|
{
|
|
@@ -494,6 +527,8 @@ export default {
|
|
|
dataIndex: 'operator',
|
|
|
key: 'operator',
|
|
|
align: 'center',
|
|
|
+ fixed: 'right',
|
|
|
+ width: 200,
|
|
|
scopedSlots: {customRender: 'operator'}
|
|
|
}
|
|
|
],
|
|
@@ -515,12 +550,14 @@ export default {
|
|
|
title: '素材ID',
|
|
|
dataIndex: 'materialId',
|
|
|
key: 'materialId',
|
|
|
+ width: 180,
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '花费',
|
|
|
dataIndex: 'cost',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.cost - b.cost
|
|
|
},
|
|
|
{
|
|
@@ -528,6 +565,7 @@ export default {
|
|
|
dataIndex: 'showMaterial',
|
|
|
key: 'showMaterial',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.showMaterial - b.showMaterial
|
|
|
},
|
|
|
{
|
|
@@ -535,6 +573,7 @@ export default {
|
|
|
dataIndex: 'costPerThousandShow',
|
|
|
key: 'costPerThousandShow',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.costPerThousandShow - b.costPerThousandShow
|
|
|
},
|
|
|
{
|
|
@@ -542,6 +581,7 @@ export default {
|
|
|
dataIndex: 'click',
|
|
|
key: 'click',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.click - b.click
|
|
|
},
|
|
|
{
|
|
@@ -549,6 +589,7 @@ export default {
|
|
|
dataIndex: 'costPerClick',
|
|
|
key: 'costPerClick',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.costPerClick - b.costPerClick
|
|
|
},
|
|
|
{
|
|
@@ -556,6 +597,7 @@ export default {
|
|
|
dataIndex: 'clickRate',
|
|
|
key: 'clickRate',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
|
|
|
},
|
|
|
{
|
|
@@ -563,6 +605,7 @@ export default {
|
|
|
dataIndex: 'convertMaterial',
|
|
|
key: 'convertMaterial',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.convertMaterial - b.convertMaterial
|
|
|
},
|
|
|
{
|
|
@@ -570,18 +613,21 @@ export default {
|
|
|
dataIndex: 'convertRate',
|
|
|
key: 'convertRate',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
sorter: (a, b) => a.convertRate.split('%')[0] - b.convertRate.split('%')[0]
|
|
|
},
|
|
|
{
|
|
|
title: '转化成本',
|
|
|
dataIndex: 'costConvert',
|
|
|
key: 'costConvert',
|
|
|
+ width: 180,
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '关联创意数',
|
|
|
dataIndex: 'count',
|
|
|
key: 'count',
|
|
|
+ width: 180,
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
@@ -589,6 +635,7 @@ export default {
|
|
|
dataIndex: 'materialUploadTime',
|
|
|
key: 'photoShow',
|
|
|
align: 'center',
|
|
|
+ width: 180,
|
|
|
scopedSlots: {customRender: 'photoShow'}
|
|
|
}
|
|
|
],
|
|
@@ -745,15 +792,17 @@ export default {
|
|
|
if (result.code === 0) {
|
|
|
this.yearCostReportList = result.result;
|
|
|
this.initEchart('gaugeEchart', this.initGaugechart(result.result.costShare));
|
|
|
- this.initEchart('accountIndexEchart', this.initAccountIndexEchart(result.result, 'activationCost'));
|
|
|
- this.throwColumns[0].today = Number(result.result.nowMap.conver);
|
|
|
- this.throwColumns[0].yesterday = Number(result.result.lastMap.conver);
|
|
|
- this.throwColumns[1].today = Number(result.result.nowMap.converNum);
|
|
|
- this.throwColumns[1].yesterday = Number(result.result.lastMap.converNum);
|
|
|
- this.throwColumns[2].today = Number(result.result.nowMap.converRate);
|
|
|
- this.throwColumns[2].yesterday = Number(result.result.lastMap.converRate);
|
|
|
- this.throwColumns[3].today = Number(result.result.nowMap.averageShow);
|
|
|
- this.throwColumns[3].yesterday = Number(result.result.lastMap.averageShow);
|
|
|
+ this.initEchart('accountIndexEchart', this.initAccountIndexEchart(result.result, 'spendCost'));
|
|
|
+ this.throwColumns[0].today = Number(result.result.nowCost);
|
|
|
+ this.throwColumns[0].yesterday = Number(result.result.lastCost);
|
|
|
+ this.throwColumns[1].today = Number(result.result.nowMap.conver);
|
|
|
+ this.throwColumns[1].yesterday = Number(result.result.lastMap.conver);
|
|
|
+ this.throwColumns[2].today = Number(result.result.nowMap.converNum);
|
|
|
+ this.throwColumns[2].yesterday = Number(result.result.lastMap.converNum);
|
|
|
+ this.throwColumns[3].today = Number(result.result.nowMap.converRate);
|
|
|
+ this.throwColumns[3].yesterday = Number(result.result.lastMap.converRate);
|
|
|
+ this.throwColumns[4].today = Number(result.result.nowMap.averageShow);
|
|
|
+ this.throwColumns[4].yesterday = Number(result.result.lastMap.averageShow);
|
|
|
}
|
|
|
else {
|
|
|
this.$message.error(result.message);
|
|
@@ -774,7 +823,6 @@ export default {
|
|
|
const defaultTime = [result.result.startTime, result.result.endTime];
|
|
|
this.dateValue = [...defaultTime];
|
|
|
this.planRangePicker = [...defaultTime];
|
|
|
- this.materialDate = [...defaultTime];
|
|
|
this.handleGetAccountMessage(result.result.account.accountId);
|
|
|
this.handleYearOnYearCost(result.result);
|
|
|
this.handleGetPlanTableList(result.result);
|
|
@@ -805,8 +853,8 @@ export default {
|
|
|
handleGetmaterialData(data) {
|
|
|
const paramsData = {
|
|
|
accountId: data.account.accountId,
|
|
|
- startTime: data.startTime,
|
|
|
- endTime: data.endTime,
|
|
|
+ startTime: this.materialDate[0],
|
|
|
+ endTime: this.materialDate[1],
|
|
|
pageNum: this.materPagin.page,
|
|
|
pageSize: this.materPagin.size
|
|
|
};
|
|
@@ -984,7 +1032,11 @@ export default {
|
|
|
}
|
|
|
let tadayShowY = [];
|
|
|
let yestodayShowY = [];
|
|
|
- if (type === 'activationCost') {
|
|
|
+ if (type === 'spendCost') {
|
|
|
+ tadayShowY = data.nowMap.costList.map(item => item.cost);
|
|
|
+ yestodayShowY = data.lastMap.costList.map(item => item.cost);
|
|
|
+ }
|
|
|
+ else if (type === 'activationCost') {
|
|
|
tadayShowY = data.nowMap.costList.map(item => item.conver);
|
|
|
yestodayShowY = data.lastMap.costList.map(item => item.conver);
|
|
|
}
|
|
@@ -1005,20 +1057,12 @@ export default {
|
|
|
trigger: 'axis',
|
|
|
formatter: params => {
|
|
|
let isType = '';
|
|
|
- let showBai = '';
|
|
|
+ let showBai = this.isActive === 'bclick' || this.isActive === 'formCount' ? '%' : '';
|
|
|
this.throwColumns.forEach(item => {
|
|
|
- console.log(item, 'item--item');
|
|
|
if (item.dataIndex === this.isActive) {
|
|
|
isType = item.title;
|
|
|
}
|
|
|
- if (item.type === 'int') {
|
|
|
- showBai = '%';
|
|
|
- }
|
|
|
- else {
|
|
|
- showBai = '';
|
|
|
- }
|
|
|
});
|
|
|
- console.log(showBai, 'showBai');
|
|
|
let option = isType + '<br/>';
|
|
|
for (let i = 0, length = params.length; i < length; i++) {
|
|
|
const showTime = specialIdentification === '时' ? params[i].seriesName : '';
|
|
@@ -1375,6 +1419,31 @@ export default {
|
|
|
.common-input-long {
|
|
|
width: 140px !important;
|
|
|
}
|
|
|
+ .sign {
|
|
|
+ font-size: 18px;
|
|
|
+ .rise {
|
|
|
+ color: #F2637B;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ transform: rotate(-30deg);
|
|
|
+ }
|
|
|
+ .fall {
|
|
|
+ color: green;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ transform: rotate(30deg);
|
|
|
+ }
|
|
|
+ .up {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #F2637B;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
.pagin-table-class {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
@@ -1398,14 +1467,14 @@ export default {
|
|
|
|
|
|
}
|
|
|
.accountBodyLeft {
|
|
|
- width: 75%;
|
|
|
+ width: 80%;
|
|
|
margin-right: 26px;
|
|
|
padding: 20px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.accountBodyRight {
|
|
|
- width: 25%;
|
|
|
+ width: 18%;
|
|
|
padding: 25px;
|
|
|
}
|
|
|
.accountBodyLeft,.accountBodyRight {
|
|
@@ -1501,31 +1570,6 @@ export default {
|
|
|
margin-bottom: 10px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .sign {
|
|
|
- font-size: 18px;
|
|
|
- .rise {
|
|
|
- color: #F2637B;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- text-align: center;
|
|
|
- transform: rotate(-30deg);
|
|
|
- }
|
|
|
- .fall {
|
|
|
- color: green;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- text-align: center;
|
|
|
- transform: rotate(30deg);
|
|
|
- }
|
|
|
- .up {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- text-align: center;
|
|
|
- background-color: #F2637B;
|
|
|
- border-radius: 5px;
|
|
|
- color: white;
|
|
|
- }
|
|
|
- }
|
|
|
.yesterdayCost {
|
|
|
font-size: 0.89rem;
|
|
|
font-weight: 500;
|