|
@@ -12,29 +12,35 @@
|
|
:allowClear="false"
|
|
:allowClear="false"
|
|
format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
:disabled-date="disabledDate"
|
|
:disabled-date="disabledDate"
|
|
- @change="onChange"
|
|
|
|
|
|
+ @change="handleCostTimeChange"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="costInfo">
|
|
<div class="costInfo">
|
|
<div class="yesterdayInfo">
|
|
<div class="yesterdayInfo">
|
|
- <div style="margin-bottom:8px">上阶段花费</div>
|
|
|
|
- <div style="font-size:14px;font-weight:600">{{ yearCostReportList.lastCost || 0 }}</div>
|
|
|
|
|
|
+ <div style="margin-bottom:8px">昨日花费</div>
|
|
|
|
+ <div style="font-size:14px;font-weight:600">{{ Number(yearCostReportList.lastCost) | decimalsHandle }}</div>
|
|
</div>
|
|
</div>
|
|
<a-divider type="vertical"/>
|
|
<a-divider type="vertical"/>
|
|
<div class="tongbi">
|
|
<div class="tongbi">
|
|
- <div style="margin-bottom:8px">
|
|
|
|
- 环比
|
|
|
|
|
|
+ <div style="margin-bottom:8px;margin-left: 10px;">
|
|
|
|
+ 同比
|
|
<a-tooltip >
|
|
<a-tooltip >
|
|
<template slot="title">
|
|
<template slot="title">
|
|
- <span>截止此时与上一阶段的花费同比</span>
|
|
|
|
|
|
+ <span>截止此时今日与昨日的花费同比</span>
|
|
</template>
|
|
</template>
|
|
- <a-icon type="question-circle" />
|
|
|
|
|
|
+ <a-icon type="question-circle"/>
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
</div>
|
|
</div>
|
|
- <div style="font-size:14px;font-weight:600">{{ yearCostReportList.compare || 0 }}</div>
|
|
|
|
|
|
+ <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>
|
|
</div>
|
|
</div>
|
|
- <div class="costNum">{{ yearCostReportList.nowCost || 0 }}</div>
|
|
|
|
|
|
+ <div class="costNum">{{ Number(yearCostReportList.nowCost) | decimalsHandle }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="accountBodyLeftCostRight">
|
|
<div class="accountBodyLeftCostRight">
|
|
<div
|
|
<div
|
|
@@ -45,33 +51,36 @@
|
|
>
|
|
>
|
|
<a-empty/>
|
|
<a-empty/>
|
|
</div>
|
|
</div>
|
|
|
|
+ <span class="cost-radio-tool">
|
|
|
|
+ 花费占比
|
|
|
|
+ <a-tooltip>
|
|
|
|
+ <template slot="title">
|
|
|
|
+ <span>花费占比指花费占账户预算的比例</span>
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon type="question-circle"/>
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accountBodyLeftOther">
|
|
<div class="accountBodyLeftOther">
|
|
<div class="top">
|
|
<div class="top">
|
|
<div class="item" v-for="item in throwColumns" :key="item.dataIndex">
|
|
<div class="item" v-for="item in throwColumns" :key="item.dataIndex">
|
|
<div class="todyCost">
|
|
<div class="todyCost">
|
|
- <span v-if="item.type === 'double'">{{ item.today }}</span>
|
|
|
|
- <span v-else-if="item.type === 'string'">{{ item.today }}</span>
|
|
|
|
- <span v-else-if="item.type === 'int'">{{ item.today }}</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">
|
|
<span class="sign">
|
|
<a-icon type="rise" class="rise" v-show="item.today - item.yesterday > 0"/>
|
|
<a-icon type="rise" class="rise" v-show="item.today - item.yesterday > 0"/>
|
|
<a-icon type="fall" class="fall" v-show="item.today - item.yesterday < 0" />
|
|
<a-icon type="fall" class="fall" v-show="item.today - item.yesterday < 0" />
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="yesterdayCost">
|
|
<div class="yesterdayCost">
|
|
- <a-tooltip >
|
|
|
|
- <template slot="title">
|
|
|
|
- <span>
|
|
|
|
- <!-- {{dateValue[0].format('YYYY-MM-DD') === dateValue[1].format('YYYY-MM-DD') ? moment(dateValue[0]).subtract(1,'days').format('YYYY-MM-DD') : dateStringShow}}
|
|
|
|
- 的{{item.title}} -->
|
|
|
|
- </span>
|
|
|
|
- </template>
|
|
|
|
- <a-icon type="question-circle" />
|
|
|
|
- </a-tooltip>:
|
|
|
|
- <span v-if="item.type === 'double'">{{ item.yesterday }}</span>
|
|
|
|
- <span v-else-if="item.type === 'string'">{{ item.yesterday }}</span>
|
|
|
|
- <span v-else-if="item.type === 'int'">{{ item.yesterday }}</span>
|
|
|
|
|
|
+ <span>/ 昨日: </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>
|
|
</div>
|
|
<span
|
|
<span
|
|
class="IndexName"
|
|
class="IndexName"
|
|
@@ -90,6 +99,9 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echart" style="margin-top:20px;position:relative">
|
|
<div class="echart" style="margin-top:20px;position:relative">
|
|
|
|
+ <div style="position:absolute;right:5px;top:-15px">
|
|
|
|
+ 更新时间:{{ yearCostReportList.updTime || '-' }}
|
|
|
|
+ </div>
|
|
<a-spin :spinning="accountIndexEchartSpinning">
|
|
<a-spin :spinning="accountIndexEchartSpinning">
|
|
<div
|
|
<div
|
|
class="accountIndexEchart"
|
|
class="accountIndexEchart"
|
|
@@ -118,17 +130,12 @@
|
|
<div class="accountBodyRightInfo">
|
|
<div class="accountBodyRightInfo">
|
|
<div class="accountBodyRightInfoItem">
|
|
<div class="accountBodyRightInfoItem">
|
|
<span class="name">余额:</span>
|
|
<span class="name">余额:</span>
|
|
- <span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.validBalance }}</span>
|
|
|
|
|
|
+ <span>{{ topAccountMsg.accountMap && Number(topAccountMsg.accountMap.validBalance) | decimalsHandle }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="accountBodyRightInfoItem">
|
|
<div class="accountBodyRightInfoItem">
|
|
<span class="name">投放状态:</span>
|
|
<span class="name">投放状态:</span>
|
|
<span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.accountStatus === 0 ? '投放中' : '未投放' }}</span>
|
|
<span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.accountStatus === 0 ? '投放中' : '未投放' }}</span>
|
|
</div>
|
|
</div>
|
|
- <div class="accountBodyRightInfoItem createNum" @click="gorejectCreativePage">
|
|
|
|
- <span class="name">被拒创意数:</span>
|
|
|
|
- <span>0</span>
|
|
|
|
- <a-icon type="right" style="font-size:12px;position:absolute;right:10px;top:16px"/>
|
|
|
|
- </div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -137,6 +144,7 @@
|
|
<div class="title">
|
|
<div class="title">
|
|
<div class="titleContext">
|
|
<div class="titleContext">
|
|
投放数据
|
|
投放数据
|
|
|
|
+ <span class="titleTip">更新时间:{{ planData.length ? planData[0].updateTime : '-' }}</span>
|
|
</div>
|
|
</div>
|
|
<div style="float: right;margin-top: -23px;">
|
|
<div style="float: right;margin-top: -23px;">
|
|
<a-range-picker
|
|
<a-range-picker
|
|
@@ -153,7 +161,7 @@
|
|
:columns="planColumns"
|
|
:columns="planColumns"
|
|
:data-source="planData"
|
|
:data-source="planData"
|
|
:pagination="false"
|
|
:pagination="false"
|
|
- @change="handlePlaneSort"
|
|
|
|
|
|
+ :scroll="{x: 1500}"
|
|
>
|
|
>
|
|
<span slot="optStatus" slot-scope="text, record">
|
|
<span slot="optStatus" slot-scope="text, record">
|
|
<a-switch :checked="text === 'AD_STATUS_ENABLE'" @change="handleSwitchChang($event, record)"/>
|
|
<a-switch :checked="text === 'AD_STATUS_ENABLE'" @change="handleSwitchChang($event, record)"/>
|
|
@@ -196,14 +204,16 @@
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</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="materialBodyRight">
|
|
<div class="material-table-class">
|
|
<div class="material-table-class">
|
|
<a-table
|
|
<a-table
|
|
:columns="materialColumns"
|
|
:columns="materialColumns"
|
|
:data-source="materialData"
|
|
:data-source="materialData"
|
|
:pagination="false"
|
|
:pagination="false"
|
|
- @change="materialChange"
|
|
|
|
|
|
+ :scroll="{x: 1500}"
|
|
>
|
|
>
|
|
<span slot="posterUrl" slot-scope="text,record">
|
|
<span slot="posterUrl" slot-scope="text,record">
|
|
<div style="background:#e8e8e8;text-align:center;border-radius:3px">
|
|
<div style="background:#e8e8e8;text-align:center;border-radius:3px">
|
|
@@ -212,15 +222,15 @@
|
|
<video :src="record.videoUrl" style="width:250px" controls></video>
|
|
<video :src="record.videoUrl" style="width:250px" controls></video>
|
|
</template>
|
|
</template>
|
|
<img v-if="text" :src="text" style="width:20px">
|
|
<img v-if="text" :src="text" style="width:20px">
|
|
- <img v-if="!text" src="@/assets/feishu.png" style="width:20px">
|
|
|
|
|
|
+ <img v-if="!text" src="@/assets/noImg.png" style="width:20px">
|
|
</a-popover>
|
|
</a-popover>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</span>
|
|
</a-table>
|
|
</a-table>
|
|
<a-pagination
|
|
<a-pagination
|
|
- class="pagin-table-class"
|
|
|
|
:total="materTotalAll"
|
|
:total="materTotalAll"
|
|
:show-total="total => `共 ${materTotalAll} 条`"
|
|
:show-total="total => `共 ${materTotalAll} 条`"
|
|
|
|
+ class="pagin-table-class"
|
|
size="small"
|
|
size="small"
|
|
show-size-changer
|
|
show-size-changer
|
|
show-quick-jumper
|
|
show-quick-jumper
|
|
@@ -233,13 +243,19 @@
|
|
<!-- 修改定向的modal -->
|
|
<!-- 修改定向的modal -->
|
|
<a-modal
|
|
<a-modal
|
|
v-model="targetVisible"
|
|
v-model="targetVisible"
|
|
- title="修改定向"
|
|
|
|
|
|
+ title="修改定向包"
|
|
@ok="handleTargethandleOk"
|
|
@ok="handleTargethandleOk"
|
|
@cancel="handleTargethandleCancel"
|
|
@cancel="handleTargethandleCancel"
|
|
>
|
|
>
|
|
<div class="linkBody">
|
|
<div class="linkBody">
|
|
<a-row>
|
|
<a-row>
|
|
<a-col :span="6">
|
|
<a-col :span="6">
|
|
|
|
+ <div style="text-align:right">已优先定向:</div>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="16">{{ packageName }}</a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <a-row style="margin-top: 20px;">
|
|
|
|
+ <a-col :span="6">
|
|
<div style="text-align:right">修改定向包:</div>
|
|
<div style="text-align:right">修改定向包:</div>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-col :span="16">
|
|
@@ -282,8 +298,8 @@
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</a-modal>
|
|
<a-modal
|
|
<a-modal
|
|
- title="修改调价"
|
|
|
|
v-if="budgetVisible"
|
|
v-if="budgetVisible"
|
|
|
|
+ title="修改出价"
|
|
:visible="budgetVisible"
|
|
:visible="budgetVisible"
|
|
dialog-class="mode-modal-class"
|
|
dialog-class="mode-modal-class"
|
|
@ok="handleBudgetSure"
|
|
@ok="handleBudgetSure"
|
|
@@ -297,10 +313,8 @@
|
|
:label-col="labelCol"
|
|
:label-col="labelCol"
|
|
:wrapper-col="wrapperCol"
|
|
:wrapper-col="wrapperCol"
|
|
>
|
|
>
|
|
- <a-form-model-item label="调价" prop="budget">
|
|
|
|
- <a-input-number
|
|
|
|
- v-model="budgetForm.budget"
|
|
|
|
- /> 元
|
|
|
|
|
|
+ <a-form-model-item label="出价" prop="budget">
|
|
|
|
+ <a-input-number v-model="budgetForm.budget"/> 元
|
|
</a-form-model-item>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</a-form-model>
|
|
</div>
|
|
</div>
|
|
@@ -353,6 +367,14 @@ export default {
|
|
accountVisible: false,
|
|
accountVisible: false,
|
|
throwColumns: [
|
|
throwColumns: [
|
|
{
|
|
{
|
|
|
|
+ title: '花费',
|
|
|
|
+ dataIndex: 'spendCost',
|
|
|
|
+ key: 'spendCost',
|
|
|
|
+ today: 0,
|
|
|
|
+ yesterday: 0,
|
|
|
|
+ type: 'spend'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
title: '转化成本',
|
|
title: '转化成本',
|
|
dataIndex: 'activationCost',
|
|
dataIndex: 'activationCost',
|
|
key: 'activationCost',
|
|
key: 'activationCost',
|
|
@@ -366,7 +388,7 @@ export default {
|
|
key: 'activation',
|
|
key: 'activation',
|
|
today: 0,
|
|
today: 0,
|
|
yesterday: 0,
|
|
yesterday: 0,
|
|
- type: 'int'
|
|
|
|
|
|
+ type: 'string'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '转化率',
|
|
title: '转化率',
|
|
@@ -388,9 +410,9 @@ export default {
|
|
newLink: '',
|
|
newLink: '',
|
|
linkVisible: false,
|
|
linkVisible: false,
|
|
targetVisible: false,
|
|
targetVisible: false,
|
|
- isActive: 'activationCost',
|
|
|
|
|
|
+ isActive: 'spendCost',
|
|
moment,
|
|
moment,
|
|
- materialDate: [],
|
|
|
|
|
|
+ materialDate: [moment().subtract(1,'days').format('YYYY-MM-DD'), moment().subtract(1,'days').format('YYYY-MM-DD')],
|
|
dateValue: [],
|
|
dateValue: [],
|
|
planData: [],
|
|
planData: [],
|
|
planPagin: {
|
|
planPagin: {
|
|
@@ -403,80 +425,101 @@ export default {
|
|
dataIndex: 'adName',
|
|
dataIndex: 'adName',
|
|
key: 'adName',
|
|
key: 'adName',
|
|
align: 'center',
|
|
align: 'center',
|
|
- width: 120,
|
|
|
|
- ellipsis: true
|
|
|
|
|
|
+ width: 240
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '花费',
|
|
title: '花费',
|
|
dataIndex: 'cost',
|
|
dataIndex: 'cost',
|
|
key: 'cost',
|
|
key: 'cost',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.cost - b.cost
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '出价',
|
|
title: '出价',
|
|
- dataIndex: 'bid',
|
|
|
|
- key: 'bid',
|
|
|
|
- align: 'center'
|
|
|
|
|
|
+ dataIndex: 'cpaBid',
|
|
|
|
+ key: 'cpaBid',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.cpaBid - b.cpaBid
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '展示数',
|
|
title: '展示数',
|
|
dataIndex: 'showNum',
|
|
dataIndex: 'showNum',
|
|
key: 'showNum',
|
|
key: 'showNum',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.showNum - b.showNum
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '平均千次展现费用',
|
|
title: '平均千次展现费用',
|
|
dataIndex: 'averageShow',
|
|
dataIndex: 'averageShow',
|
|
key: 'averageShow',
|
|
key: 'averageShow',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.averageShow - b.averageShow
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '点击数',
|
|
title: '点击数',
|
|
dataIndex: 'click',
|
|
dataIndex: 'click',
|
|
key: 'click',
|
|
key: 'click',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.click - b.click
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '平均点击单价',
|
|
title: '平均点击单价',
|
|
dataIndex: 'averageClick',
|
|
dataIndex: 'averageClick',
|
|
key: 'averageClick',
|
|
key: 'averageClick',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.averageClick - b.averageClick
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '点击率',
|
|
title: '点击率',
|
|
dataIndex: 'clickRate',
|
|
dataIndex: 'clickRate',
|
|
key: 'clickRate',
|
|
key: 'clickRate',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '转化数',
|
|
title: '转化数',
|
|
dataIndex: 'convertNum',
|
|
dataIndex: 'convertNum',
|
|
key: 'convertNum',
|
|
key: 'convertNum',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.convertNum - b.convertNum
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '转化率',
|
|
title: '转化率',
|
|
dataIndex: 'converRate',
|
|
dataIndex: 'converRate',
|
|
key: 'converRate',
|
|
key: 'converRate',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.converRate.split('%')[0] - b.converRate.split('%')[0]
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '转化成本',
|
|
title: '转化成本',
|
|
dataIndex: 'conver',
|
|
dataIndex: 'conver',
|
|
key: 'conver',
|
|
key: 'conver',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.conver - b.conver
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '环比',
|
|
|
|
|
|
+ title: '同比',
|
|
dataIndex: 'compare',
|
|
dataIndex: 'compare',
|
|
key: 'compare',
|
|
key: 'compare',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '状态',
|
|
title: '状态',
|
|
dataIndex: 'optStatus',
|
|
dataIndex: 'optStatus',
|
|
key: 'optStatus',
|
|
key: 'optStatus',
|
|
align: 'center',
|
|
align: 'center',
|
|
|
|
+ width: 180,
|
|
scopedSlots: {customRender: 'optStatus'}
|
|
scopedSlots: {customRender: 'optStatus'}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -484,6 +527,8 @@ export default {
|
|
dataIndex: 'operator',
|
|
dataIndex: 'operator',
|
|
key: 'operator',
|
|
key: 'operator',
|
|
align: 'center',
|
|
align: 'center',
|
|
|
|
+ fixed: 'right',
|
|
|
|
+ width: 200,
|
|
scopedSlots: {customRender: 'operator'}
|
|
scopedSlots: {customRender: 'operator'}
|
|
}
|
|
}
|
|
],
|
|
],
|
|
@@ -505,66 +550,84 @@ export default {
|
|
title: '素材ID',
|
|
title: '素材ID',
|
|
dataIndex: 'materialId',
|
|
dataIndex: 'materialId',
|
|
key: 'materialId',
|
|
key: 'materialId',
|
|
|
|
+ width: 180,
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '花费',
|
|
title: '花费',
|
|
dataIndex: 'cost',
|
|
dataIndex: 'cost',
|
|
align: 'center',
|
|
align: 'center',
|
|
- sorter: () => {}
|
|
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.cost - b.cost
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '展示数',
|
|
title: '展示数',
|
|
dataIndex: 'showMaterial',
|
|
dataIndex: 'showMaterial',
|
|
key: 'showMaterial',
|
|
key: 'showMaterial',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.showMaterial - b.showMaterial
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '平均千次展现费用',
|
|
title: '平均千次展现费用',
|
|
dataIndex: 'costPerThousandShow',
|
|
dataIndex: 'costPerThousandShow',
|
|
key: 'costPerThousandShow',
|
|
key: 'costPerThousandShow',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.costPerThousandShow - b.costPerThousandShow
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '点击数',
|
|
title: '点击数',
|
|
dataIndex: 'click',
|
|
dataIndex: 'click',
|
|
key: 'click',
|
|
key: 'click',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.click - b.click
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '平均店家单价',
|
|
|
|
|
|
+ title: '平均点击单价',
|
|
dataIndex: 'costPerClick',
|
|
dataIndex: 'costPerClick',
|
|
key: 'costPerClick',
|
|
key: 'costPerClick',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.costPerClick - b.costPerClick
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '点击率',
|
|
title: '点击率',
|
|
dataIndex: 'clickRate',
|
|
dataIndex: 'clickRate',
|
|
key: 'clickRate',
|
|
key: 'clickRate',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '转化数',
|
|
title: '转化数',
|
|
dataIndex: 'convertMaterial',
|
|
dataIndex: 'convertMaterial',
|
|
key: 'convertMaterial',
|
|
key: 'convertMaterial',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.convertMaterial - b.convertMaterial
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '转化率',
|
|
title: '转化率',
|
|
dataIndex: 'convertRate',
|
|
dataIndex: 'convertRate',
|
|
key: 'convertRate',
|
|
key: 'convertRate',
|
|
- align: 'center'
|
|
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 180,
|
|
|
|
+ sorter: (a, b) => a.convertRate.split('%')[0] - b.convertRate.split('%')[0]
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '转化成本',
|
|
title: '转化成本',
|
|
dataIndex: 'costConvert',
|
|
dataIndex: 'costConvert',
|
|
key: 'costConvert',
|
|
key: 'costConvert',
|
|
|
|
+ width: 180,
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '关联创意数',
|
|
title: '关联创意数',
|
|
dataIndex: 'count',
|
|
dataIndex: 'count',
|
|
key: 'count',
|
|
key: 'count',
|
|
|
|
+ width: 180,
|
|
align: 'center'
|
|
align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -572,8 +635,8 @@ export default {
|
|
dataIndex: 'materialUploadTime',
|
|
dataIndex: 'materialUploadTime',
|
|
key: 'photoShow',
|
|
key: 'photoShow',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: {customRender: 'photoShow'},
|
|
|
|
- sorter: () => {}
|
|
|
|
|
|
+ width: 180,
|
|
|
|
+ scopedSlots: {customRender: 'photoShow'}
|
|
}
|
|
}
|
|
],
|
|
],
|
|
materialData: [],
|
|
materialData: [],
|
|
@@ -589,7 +652,8 @@ export default {
|
|
topCostList: {},
|
|
topCostList: {},
|
|
yearCostReportList: {}, // 环比数据
|
|
yearCostReportList: {}, // 环比数据
|
|
selectiveList: [],
|
|
selectiveList: [],
|
|
- currentUnit: {}
|
|
|
|
|
|
+ currentUnit: {},
|
|
|
|
+ packageName: ''
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -599,10 +663,7 @@ export default {
|
|
...mapGetters(['userInfo']),
|
|
...mapGetters(['userInfo']),
|
|
// 获取所有的定向包的列表
|
|
// 获取所有的定向包的列表
|
|
handleGetAdAudiencePackage(account) {
|
|
handleGetAdAudiencePackage(account) {
|
|
- const params = {
|
|
|
|
- accountId: account
|
|
|
|
- };
|
|
|
|
- getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', params)
|
|
|
|
|
|
+ getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', {accountId: account})
|
|
.then(result => {
|
|
.then(result => {
|
|
if (result.code === 0) {
|
|
if (result.code === 0) {
|
|
this.selectiveList = result.result || [];
|
|
this.selectiveList = result.result || [];
|
|
@@ -637,7 +698,24 @@ export default {
|
|
console.log(error, 'eeee');
|
|
console.log(error, 'eeee');
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ handleGetADAudiencePackageId(actId, id) {
|
|
|
|
+ const paramsData = {
|
|
|
|
+ accountId: actId,
|
|
|
|
+ adId: id
|
|
|
|
+ };
|
|
|
|
+ getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getADAudiencePackageId', paramsData).then(result => {
|
|
|
|
+ if (result.code === 0) {
|
|
|
|
+ this.packageName = result.result.packageId ? this.selectiveList.filter(item => item.audience_package_id === Number(result.result.packageId))[0].name : '暂无';
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this.$message.error(result.message);
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ console.log(error, 'eeee');
|
|
|
|
+ });
|
|
|
|
+ },
|
|
handleUpdateDirectional(record) {
|
|
handleUpdateDirectional(record) {
|
|
|
|
+ this.handleGetADAudiencePackageId(this.topAccountMsg.accountMap.accountId, record.adId);
|
|
this.currentUnit = record;
|
|
this.currentUnit = record;
|
|
this.targetVisible = true;
|
|
this.targetVisible = true;
|
|
},
|
|
},
|
|
@@ -690,8 +768,10 @@ export default {
|
|
};
|
|
};
|
|
getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportPlanCost', paramsData).then(result => {
|
|
getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportPlanCost', paramsData).then(result => {
|
|
if (result.code === 0) {
|
|
if (result.code === 0) {
|
|
- console.log(result.result, '计划列表数据');
|
|
|
|
- this.planData = result.result.list;
|
|
|
|
|
|
+ this.planData = result.result.list.map(item => {
|
|
|
|
+ item.converRate = item.converRate + '%';
|
|
|
|
+ return item;
|
|
|
|
+ });
|
|
this.planTotalAll = result.result.total;
|
|
this.planTotalAll = result.result.total;
|
|
}
|
|
}
|
|
else {
|
|
else {
|
|
@@ -712,15 +792,17 @@ export default {
|
|
if (result.code === 0) {
|
|
if (result.code === 0) {
|
|
this.yearCostReportList = result.result;
|
|
this.yearCostReportList = result.result;
|
|
this.initEchart('gaugeEchart', this.initGaugechart(result.result.costShare));
|
|
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 {
|
|
else {
|
|
this.$message.error(result.message);
|
|
this.$message.error(result.message);
|
|
@@ -741,7 +823,6 @@ export default {
|
|
const defaultTime = [result.result.startTime, result.result.endTime];
|
|
const defaultTime = [result.result.startTime, result.result.endTime];
|
|
this.dateValue = [...defaultTime];
|
|
this.dateValue = [...defaultTime];
|
|
this.planRangePicker = [...defaultTime];
|
|
this.planRangePicker = [...defaultTime];
|
|
- this.materialDate = [...defaultTime];
|
|
|
|
this.handleGetAccountMessage(result.result.account.accountId);
|
|
this.handleGetAccountMessage(result.result.account.accountId);
|
|
this.handleYearOnYearCost(result.result);
|
|
this.handleYearOnYearCost(result.result);
|
|
this.handleGetPlanTableList(result.result);
|
|
this.handleGetPlanTableList(result.result);
|
|
@@ -757,10 +838,7 @@ export default {
|
|
},
|
|
},
|
|
// 获取头部最右侧数据
|
|
// 获取头部最右侧数据
|
|
handleGetAccountMessage(value) {
|
|
handleGetAccountMessage(value) {
|
|
- const paramsData = {
|
|
|
|
- accountId: value
|
|
|
|
- };
|
|
|
|
- getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getAccountCost', paramsData).then(result => {
|
|
|
|
|
|
+ getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getAccountCost', {accountId: value}).then(result => {
|
|
if (result.code === 0) {
|
|
if (result.code === 0) {
|
|
this.topAccountMsg = result.result;
|
|
this.topAccountMsg = result.result;
|
|
}
|
|
}
|
|
@@ -775,14 +853,18 @@ export default {
|
|
handleGetmaterialData(data) {
|
|
handleGetmaterialData(data) {
|
|
const paramsData = {
|
|
const paramsData = {
|
|
accountId: data.account.accountId,
|
|
accountId: data.account.accountId,
|
|
- startTime: data.startTime,
|
|
|
|
- endTime: data.endTime,
|
|
|
|
|
|
+ startTime: this.materialDate[0],
|
|
|
|
+ endTime: this.materialDate[1],
|
|
pageNum: this.materPagin.page,
|
|
pageNum: this.materPagin.page,
|
|
pageSize: this.materPagin.size
|
|
pageSize: this.materPagin.size
|
|
};
|
|
};
|
|
getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/selectMaterialDailyReport', paramsData).then(result => {
|
|
getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/selectMaterialDailyReport', paramsData).then(result => {
|
|
if (result.code === 0) {
|
|
if (result.code === 0) {
|
|
- this.materialData = result.result.list;
|
|
|
|
|
|
+ this.materialData = result.result.list.map(item => {
|
|
|
|
+ item.clickRate = item.clickRate + '%';
|
|
|
|
+ item.convertRate = item.convertRate + '%';
|
|
|
|
+ return item;
|
|
|
|
+ });
|
|
this.materTotalAll = result.result.total;
|
|
this.materTotalAll = result.result.total;
|
|
}
|
|
}
|
|
else {
|
|
else {
|
|
@@ -820,6 +902,7 @@ export default {
|
|
// 修改定向的取消按钮
|
|
// 修改定向的取消按钮
|
|
handleTargethandleCancel() {
|
|
handleTargethandleCancel() {
|
|
this.adAudiencePackageId = '';
|
|
this.adAudiencePackageId = '';
|
|
|
|
+ this.packageName = '';
|
|
this.targetVisible = false;
|
|
this.targetVisible = false;
|
|
},
|
|
},
|
|
handleAccounthandleOk() {
|
|
handleAccounthandleOk() {
|
|
@@ -827,8 +910,8 @@ export default {
|
|
account: {
|
|
account: {
|
|
accountId: this.selectaccountId
|
|
accountId: this.selectaccountId
|
|
},
|
|
},
|
|
- startTime: this.topCostList.startTime,
|
|
|
|
- endTime: this.topCostList.startTime
|
|
|
|
|
|
+ startTime: this.dateValue[0],
|
|
|
|
+ endTime: this.dateValue[1]
|
|
};
|
|
};
|
|
this.topCostList = paramsData;
|
|
this.topCostList = paramsData;
|
|
this.handleGetAccountMessage(this.selectaccountId);
|
|
this.handleGetAccountMessage(this.selectaccountId);
|
|
@@ -845,6 +928,7 @@ export default {
|
|
},
|
|
},
|
|
// 计划点击分页操作
|
|
// 计划点击分页操作
|
|
handleOnShowSizeChange(current, pageSize) {
|
|
handleOnShowSizeChange(current, pageSize) {
|
|
|
|
+ console.log(current, pageSize, 'current, pageSize');
|
|
this.planPagin = {
|
|
this.planPagin = {
|
|
page: current,
|
|
page: current,
|
|
size: pageSize
|
|
size: pageSize
|
|
@@ -868,12 +952,12 @@ export default {
|
|
account: {
|
|
account: {
|
|
accountId: this.topCostList.account.accountId
|
|
accountId: this.topCostList.account.accountId
|
|
},
|
|
},
|
|
- startTime: this.planRangePicker[0],
|
|
|
|
- endTime: this.planRangePicker[1]
|
|
|
|
|
|
+ startTime: this.materialDate[0],
|
|
|
|
+ endTime: this.materialDate[1]
|
|
};
|
|
};
|
|
this.handleGetmaterialData(paramsData);
|
|
this.handleGetmaterialData(paramsData);
|
|
},
|
|
},
|
|
- // have 跳转到拒审重提-创意页面
|
|
|
|
|
|
+ // TODO 暂时功能隐藏 跳转到拒审重提-创意页面
|
|
gorejectCreativePage() {
|
|
gorejectCreativePage() {
|
|
this.$router.push('/Statistics/refuseDataCreatNew');
|
|
this.$router.push('/Statistics/refuseDataCreatNew');
|
|
},
|
|
},
|
|
@@ -896,11 +980,8 @@ export default {
|
|
};
|
|
};
|
|
this.handleGetPlanTableList(paramsData);
|
|
this.handleGetPlanTableList(paramsData);
|
|
},
|
|
},
|
|
- onChange(date, dateString) {
|
|
|
|
- if (dateString.length > 0 && dateString[0] !== dateString[1]) {
|
|
|
|
- let interval = date[1].diff(date[0], 'days');
|
|
|
|
- this.dateStringShow = `${moment(date[0]).subtract(1 + interval, 'days').format('YYYY-MM-DD')}~${moment(date[0]).subtract(1, 'days').format('YYYY-MM-DD')}`;
|
|
|
|
- }
|
|
|
|
|
|
+ handleCostTimeChange(date, dateString) {
|
|
|
|
+ this.dateValue = dateString;
|
|
const paramsData = {
|
|
const paramsData = {
|
|
account: {
|
|
account: {
|
|
accountId: this.topCostList.account.accountId
|
|
accountId: this.topCostList.account.accountId
|
|
@@ -940,6 +1021,7 @@ export default {
|
|
},
|
|
},
|
|
// 默认echarts
|
|
// 默认echarts
|
|
initAccountIndexEchart(data, type) {
|
|
initAccountIndexEchart(data, type) {
|
|
|
|
+ const LastX = data.lastMap.costList.map(item => item.time);
|
|
const todayX = data.nowMap.costList.map(item => item.time);
|
|
const todayX = data.nowMap.costList.map(item => item.time);
|
|
let specialIdentification = '';
|
|
let specialIdentification = '';
|
|
if (todayX.length && todayX[0].indexOf('-') !== -1) {
|
|
if (todayX.length && todayX[0].indexOf('-') !== -1) {
|
|
@@ -950,7 +1032,11 @@ export default {
|
|
}
|
|
}
|
|
let tadayShowY = [];
|
|
let tadayShowY = [];
|
|
let yestodayShowY = [];
|
|
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);
|
|
tadayShowY = data.nowMap.costList.map(item => item.conver);
|
|
yestodayShowY = data.lastMap.costList.map(item => item.conver);
|
|
yestodayShowY = data.lastMap.costList.map(item => item.conver);
|
|
}
|
|
}
|
|
@@ -971,6 +1057,7 @@ export default {
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
formatter: params => {
|
|
formatter: params => {
|
|
let isType = '';
|
|
let isType = '';
|
|
|
|
+ let showBai = this.isActive === 'bclick' || this.isActive === 'formCount' ? '%' : '';
|
|
this.throwColumns.forEach(item => {
|
|
this.throwColumns.forEach(item => {
|
|
if (item.dataIndex === this.isActive) {
|
|
if (item.dataIndex === this.isActive) {
|
|
isType = item.title;
|
|
isType = item.title;
|
|
@@ -978,7 +1065,8 @@ export default {
|
|
});
|
|
});
|
|
let option = isType + '<br/>';
|
|
let option = isType + '<br/>';
|
|
for (let i = 0, length = params.length; i < length; i++) {
|
|
for (let i = 0, length = params.length; i < length; i++) {
|
|
- option += `<span style="width:8px;height:8px;border-radius:50%;background:${params[i].color};display:inline-block;position:relative;top:-2px;margin-right:5px"></span>` + ' ' + params[i].axisValue + specialIdentification + ' ' + params[i].data + '<br />';
|
|
|
|
|
|
+ const showTime = specialIdentification === '时' ? params[i].seriesName : '';
|
|
|
|
+ option += `<span style="width:8px;height:8px;border-radius:50%;background:${params[i].color};display:inline-block;position:relative;top:-2px;margin-right:5px"></span>${showTime} ${params[i].axisValue}${specialIdentification} ${params[i].data}${showBai}<br />`;
|
|
}
|
|
}
|
|
return option;
|
|
return option;
|
|
}
|
|
}
|
|
@@ -1039,11 +1127,14 @@ export default {
|
|
y: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
y2: 1,
|
|
- colorStops: [{
|
|
|
|
- offset: 0, color: '#2461F1' // 0% 处的颜色
|
|
|
|
- }, {
|
|
|
|
- offset: 1, color: 'white' // 100% 处的颜色
|
|
|
|
- }]
|
|
|
|
|
|
+ colorStops: [
|
|
|
|
+ {
|
|
|
|
+ offset: 0, color: '#2461F1' // 0% 处的颜色
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1, color: 'white' // 100% 处的颜色
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -1063,12 +1154,28 @@ export default {
|
|
color: '#3CC6A5',
|
|
color: '#3CC6A5',
|
|
borderWidth: 2,
|
|
borderWidth: 2,
|
|
borderColor: '#fff'
|
|
borderColor: '#fff'
|
|
|
|
+ },
|
|
|
|
+ areaStyle: {
|
|
|
|
+ color: {
|
|
|
|
+ type: 'linear',
|
|
|
|
+ x: 0,
|
|
|
|
+ y: 0,
|
|
|
|
+ x2: 0,
|
|
|
|
+ y2: 1,
|
|
|
|
+ colorStops: [
|
|
|
|
+ {
|
|
|
|
+ offset: 0, color: '#3CC6A5' // 0% 处的颜色
|
|
|
|
+ }, {
|
|
|
|
+ offset: 1, color: 'white' // 100% 处的颜色
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
]
|
|
};
|
|
};
|
|
option.xAxis[0].data = todayX;
|
|
option.xAxis[0].data = todayX;
|
|
- option.xAxis[1].data = todayX;
|
|
|
|
|
|
+ option.xAxis[1].data = LastX;
|
|
option.series[0].data = tadayShowY;
|
|
option.series[0].data = tadayShowY;
|
|
option.series[1].data = yestodayShowY;
|
|
option.series[1].data = yestodayShowY;
|
|
return option;
|
|
return option;
|
|
@@ -1139,10 +1246,12 @@ export default {
|
|
fontFamily: 'PingFangSC'
|
|
fontFamily: 'PingFangSC'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- data: [{
|
|
|
|
- name: '花费占比',
|
|
|
|
- value: dataArr
|
|
|
|
- }],
|
|
|
|
|
|
+ data: [
|
|
|
|
+ {
|
|
|
|
+ name: '',
|
|
|
|
+ value: dataArr
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
pointer: {
|
|
pointer: {
|
|
show: true,
|
|
show: true,
|
|
length: '75%',
|
|
length: '75%',
|
|
@@ -1226,44 +1335,12 @@ export default {
|
|
]
|
|
]
|
|
};
|
|
};
|
|
return option;
|
|
return option;
|
|
- },
|
|
|
|
- // 投放点击排序功能
|
|
|
|
- handlePlaneSort(pagination, filters, sorter, {currentDataSource}) {
|
|
|
|
- if (sorter.order === 'descend') {
|
|
|
|
- this.newDataSortType = 'DESC';
|
|
|
|
- this.newDataSortCode = sorter.columnKey;
|
|
|
|
- }
|
|
|
|
- else if (sorter.order === 'ascend') {
|
|
|
|
- this.newDataSortType = 'ASC';
|
|
|
|
- this.newDataSortCode = sorter.columnKey;
|
|
|
|
- }
|
|
|
|
- else {
|
|
|
|
- this.newDataSortType = 'DESC';
|
|
|
|
- this.newDataSortCode = 'charge';
|
|
|
|
- }
|
|
|
|
- this.getLaunchData();
|
|
|
|
- },
|
|
|
|
- // 素材点击排序功能
|
|
|
|
- materialChange(pagination, filters, sorter) {
|
|
|
|
- console.log(sorter, 'v--sorter--sorter');
|
|
|
|
- if (sorter.order === 'descend') {
|
|
|
|
- this.materialSortType = 'DESC';
|
|
|
|
- this.materialSortCode = sorter.columnKey;
|
|
|
|
- }
|
|
|
|
- else if (sorter.order === 'ascend') {
|
|
|
|
- this.materialSortType = 'ASC';
|
|
|
|
- this.materialSortCode = sorter.columnKey;
|
|
|
|
- }
|
|
|
|
- else {
|
|
|
|
- this.materialSortType = 'DESC';
|
|
|
|
- this.materialSortCode = 'charge';
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
- .accountPage .accountBody{
|
|
|
|
|
|
+ .accountPage .accountBody {
|
|
line-height: 1;
|
|
line-height: 1;
|
|
.ant-input {
|
|
.ant-input {
|
|
-webkit-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
@@ -1342,6 +1419,31 @@ export default {
|
|
.common-input-long {
|
|
.common-input-long {
|
|
width: 140px !important;
|
|
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 {
|
|
.pagin-table-class {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
@@ -1365,14 +1467,14 @@ export default {
|
|
|
|
|
|
}
|
|
}
|
|
.accountBodyLeft {
|
|
.accountBodyLeft {
|
|
- width: 75%;
|
|
|
|
|
|
+ width: 80%;
|
|
margin-right: 26px;
|
|
margin-right: 26px;
|
|
padding: 20px;
|
|
padding: 20px;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.accountBodyRight {
|
|
.accountBodyRight {
|
|
- width: 25%;
|
|
|
|
|
|
+ width: 18%;
|
|
padding: 25px;
|
|
padding: 25px;
|
|
}
|
|
}
|
|
.accountBodyLeft,.accountBodyRight {
|
|
.accountBodyLeft,.accountBodyRight {
|
|
@@ -1401,14 +1503,14 @@ export default {
|
|
}
|
|
}
|
|
.costInfo {
|
|
.costInfo {
|
|
margin: 20px 0 0 0;
|
|
margin: 20px 0 0 0;
|
|
- width: 70%;
|
|
|
|
|
|
+ width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
- .yesterdayInfo {
|
|
|
|
- width:50%;
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ // .yesterdayInfo {
|
|
|
|
+ // width:50%;
|
|
|
|
+ // flex-shrink: 0;
|
|
|
|
+ // }
|
|
.costNum{
|
|
.costNum{
|
|
width: 90%;
|
|
width: 90%;
|
|
font-size: 26px;
|
|
font-size: 26px;
|
|
@@ -1439,6 +1541,13 @@ export default {
|
|
}
|
|
}
|
|
.accountBodyLeftCostRight {
|
|
.accountBodyLeftCostRight {
|
|
width: 45%;
|
|
width: 45%;
|
|
|
|
+ margin-left: 15px;
|
|
|
|
+ position: relative;
|
|
|
|
+ .cost-radio-tool {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 34px;
|
|
|
|
+ left: 28%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.accountBodyLeftOther {
|
|
.accountBodyLeftOther {
|
|
width: 60%;
|
|
width: 60%;
|
|
@@ -1461,31 +1570,6 @@ export default {
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
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 {
|
|
.yesterdayCost {
|
|
font-size: 0.89rem;
|
|
font-size: 0.89rem;
|
|
font-weight: 500;
|
|
font-weight: 500;
|