|
@@ -189,30 +189,30 @@
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="materialBodyRight">
|
|
<div class="materialBodyRight">
|
|
- <div class="table">
|
|
|
|
|
|
+ <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"
|
|
@change="materialChange"
|
|
>
|
|
>
|
|
- <!-- <span slot="coverUrl" slot-scope="text,record" >
|
|
|
|
|
|
+ <span slot="url" slot-scope="text,record" >
|
|
<div style="background:#e8e8e8;text-align:center;border-radius:3px">
|
|
<div style="background:#e8e8e8;text-align:center;border-radius:3px">
|
|
<a-popover placement="right">
|
|
<a-popover placement="right">
|
|
<template slot="content">
|
|
<template slot="content">
|
|
- <video :src="record.url" style="width:250px" controls></video>
|
|
|
|
|
|
+ <video :src="record.videoUrl" style="width:250px" controls></video>
|
|
</template>
|
|
</template>
|
|
<template slot="title">
|
|
<template slot="title">
|
|
</template>
|
|
</template>
|
|
<img :src="text" style="width:20px">
|
|
<img :src="text" style="width:20px">
|
|
</a-popover>
|
|
</a-popover>
|
|
</div>
|
|
</div>
|
|
- </span> -->
|
|
|
|
|
|
+ </span>
|
|
</a-table>
|
|
</a-table>
|
|
<a-pagination
|
|
<a-pagination
|
|
class="pagin-table-class"
|
|
class="pagin-table-class"
|
|
- :total="planTotalAll"
|
|
|
|
- :show-total="total => `共 ${planTotalAll} 条`"
|
|
|
|
|
|
+ :total="materTotalAll"
|
|
|
|
+ :show-total="total => `共 ${materTotalAll} 条`"
|
|
size="small"
|
|
size="small"
|
|
show-size-changer
|
|
show-size-changer
|
|
show-quick-jumper
|
|
show-quick-jumper
|
|
@@ -271,6 +271,7 @@ import moment from 'moment';
|
|
import {getAction, postAction} from '@/api/manage';
|
|
import {getAction, postAction} from '@/api/manage';
|
|
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue';
|
|
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue';
|
|
import { mapGetters } from 'vuex';
|
|
import { mapGetters } from 'vuex';
|
|
|
|
+import {urlAcount} from './headline-view-server.js';
|
|
|
|
|
|
// 引入基本模板
|
|
// 引入基本模板
|
|
var echarts = require('echarts');
|
|
var echarts = require('echarts');
|
|
@@ -359,8 +360,7 @@ export default {
|
|
dataIndex: 'charge',
|
|
dataIndex: 'charge',
|
|
key: 'charge',
|
|
key: 'charge',
|
|
align: 'center',
|
|
align: 'center',
|
|
- // scopedSlots: {customRender: 'charge'},
|
|
|
|
- sorter: () => {}
|
|
|
|
|
|
+ // scopedSlots: {customRender: 'charge'}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '环比',
|
|
title: '环比',
|
|
@@ -380,36 +380,87 @@ export default {
|
|
materialColumns: [
|
|
materialColumns: [
|
|
{
|
|
{
|
|
title: '素材',
|
|
title: '素材',
|
|
- dataIndex: 'coverUrl',
|
|
|
|
- key: 'coverUrl',
|
|
|
|
|
|
+ dataIndex: 'url',
|
|
|
|
+ key: 'url',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'coverUrl' },
|
|
|
|
|
|
+ scopedSlots: {customRender: 'url'},
|
|
width:100,
|
|
width:100,
|
|
fixed:'left'
|
|
fixed:'left'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '素材ID',
|
|
title: '素材ID',
|
|
- dataIndex: 'signature',
|
|
|
|
- key: 'signature',
|
|
|
|
- width:150,
|
|
|
|
|
|
+ dataIndex: 'materialId',
|
|
|
|
+ key: 'materialId',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '花费',
|
|
|
|
+ dataIndex: 'cost',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'signature' }
|
|
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '展示数',
|
|
|
|
+ dataIndex: 'showMaterial',
|
|
|
|
+ key: 'showMaterial',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '平均千次展现费用',
|
|
|
|
+ dataIndex: 'costPerThousandShow',
|
|
|
|
+ key: 'costPerThousandShow',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '点击数',
|
|
|
|
+ dataIndex: 'click',
|
|
|
|
+ key: 'click',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '平均店家单价',
|
|
|
|
+ dataIndex: 'costPerClick',
|
|
|
|
+ key: 'costPerClick',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '点击率',
|
|
|
|
+ dataIndex: 'clickRate',
|
|
|
|
+ key: 'clickRate',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '转化数',
|
|
|
|
+ dataIndex: 'convertMaterial',
|
|
|
|
+ key: 'convertMaterial',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '转化率',
|
|
|
|
+ dataIndex: 'convertRate',
|
|
|
|
+ key: 'convertRate',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '转化成本',
|
|
|
|
+ dataIndex: 'costConvert',
|
|
|
|
+ key: 'costConvert',
|
|
|
|
+ align: 'center'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '曝光数',
|
|
|
|
- dataIndex: 'photoShow',
|
|
|
|
|
|
+ title: '关联创意数',
|
|
|
|
+ dataIndex: 'count',
|
|
|
|
+ key: 'count',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '上线时间',
|
|
|
|
+ dataIndex: 'materialUploadTime',
|
|
key: 'photoShow',
|
|
key: 'photoShow',
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'photoShow' },
|
|
scopedSlots: { customRender: 'photoShow' },
|
|
sorter:() => {}
|
|
sorter:() => {}
|
|
},
|
|
},
|
|
- {
|
|
|
|
- title: '花费',
|
|
|
|
- dataIndex: 'charge',
|
|
|
|
- align: 'center',
|
|
|
|
- scopedSlots: { customRender: 'charge' },
|
|
|
|
- sorter:() => {}
|
|
|
|
- }
|
|
|
|
],
|
|
],
|
|
materialData:[
|
|
materialData:[
|
|
{
|
|
{
|
|
@@ -417,6 +468,7 @@ export default {
|
|
photoShow: '345'
|
|
photoShow: '345'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
|
|
+ materTotalAll: 0,
|
|
accountIndexEchartSpinning: false, //账户模块的指标的echart
|
|
accountIndexEchartSpinning: false, //账户模块的指标的echart
|
|
newDataSortCode: 'charge',
|
|
newDataSortCode: 'charge',
|
|
newDataSortType: 'DESC',
|
|
newDataSortType: 'DESC',
|
|
@@ -429,9 +481,28 @@ export default {
|
|
mounted() {
|
|
mounted() {
|
|
this.initEchart('gaugeEchart', this.initGaugechart());
|
|
this.initEchart('gaugeEchart', this.initGaugechart());
|
|
this.initEchart('accountIndexEchart', this.initAccountIndexEchart());
|
|
this.initEchart('accountIndexEchart', this.initAccountIndexEchart());
|
|
|
|
+ this.handleGetmaterialData();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
...mapGetters(['userInfo']),
|
|
...mapGetters(['userInfo']),
|
|
|
|
+ handleGetmaterialData() {
|
|
|
|
+ const paramsData = {
|
|
|
|
+ accountId: '1649604727308295',
|
|
|
|
+ startTime: '',
|
|
|
|
+ endTime: ''
|
|
|
|
+ };
|
|
|
|
+ getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/selectMaterialDailyReport', paramsData).then(result => {
|
|
|
|
+ if (result.code === 0) {
|
|
|
|
+ this.materialData = result.result.list;
|
|
|
|
+ this.materTotalAll = result.result.total;
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this.$message.error(result.message);
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ console.log(error, 'eeee');
|
|
|
|
+ });
|
|
|
|
+ },
|
|
handleGetActiveIndexName(val){
|
|
handleGetActiveIndexName(val){
|
|
this.isActive = val.dataIndex;
|
|
this.isActive = val.dataIndex;
|
|
},
|
|
},
|
|
@@ -850,7 +921,8 @@ export default {
|
|
this.getLaunchData()
|
|
this.getLaunchData()
|
|
},
|
|
},
|
|
materialChange(pagination, filters, sorter){
|
|
materialChange(pagination, filters, sorter){
|
|
- if(sorter.order=="descend"){
|
|
|
|
|
|
+ console.log(sorter, 'v--sorter--sorter');
|
|
|
|
+ if(sorter.order === "descend"){
|
|
this.materialSortType='DESC'
|
|
this.materialSortType='DESC'
|
|
this.materialSortCode=sorter.columnKey
|
|
this.materialSortCode=sorter.columnKey
|
|
}else if(sorter.order=="ascend"){
|
|
}else if(sorter.order=="ascend"){
|
|
@@ -955,7 +1027,6 @@ export default {
|
|
.bodyBox {
|
|
.bodyBox {
|
|
width: 100%;
|
|
width: 100%;
|
|
margin-bottom: 26px;
|
|
margin-bottom: 26px;
|
|
- height: 450px;
|
|
|
|
}
|
|
}
|
|
.accountBody {
|
|
.accountBody {
|
|
height: 300px;
|
|
height: 300px;
|
|
@@ -1185,6 +1256,10 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
padding-top: 60px;
|
|
padding-top: 60px;
|
|
|
|
+ .material-table-class {
|
|
|
|
+ height: 100%;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.accountBodyRighTitle {
|
|
.accountBodyRighTitle {
|
|
.acount-body-content {
|
|
.acount-body-content {
|