|
@@ -33,7 +33,7 @@
|
|
|
|
|
|
</div>
|
|
|
<div class="timeDiv">
|
|
|
- <div>
|
|
|
+ <div style="margin-right:30px">
|
|
|
<span>时间范围:</span>
|
|
|
|
|
|
<a-range-picker
|
|
@@ -47,14 +47,14 @@
|
|
|
</div>
|
|
|
<div>
|
|
|
<span>图片ID:</span>
|
|
|
- <a-input class="myinput" v-model="videoID" style="width:250px" />
|
|
|
+ <a-input class="myinput" v-model="videoID" style="width:250px" :allowClear='true' />
|
|
|
</div>
|
|
|
|
|
|
- <a-button type="primary" @click="searchRes">查询</a-button>
|
|
|
+ <a-button type="primary" style="position:absolute;right:0" @click="searchRes">查询</a-button>
|
|
|
</div>
|
|
|
|
|
|
<div style="display:flex;margin:15px 0" class="btndiv">
|
|
|
- <a-button type="primary" @click="exportExcel" id="mybtn" v-show="exportExcelIsOk">导出报表</a-button>
|
|
|
+ <a-button type="primary" @click="exportExcel" id="mybtn" :loading="exportExcelIsOk">导出报表</a-button>
|
|
|
</div>
|
|
|
|
|
|
|
|
@@ -81,24 +81,40 @@
|
|
|
@load="loadShow"
|
|
|
/>
|
|
|
</div>
|
|
|
- <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
|
|
|
+ <span slot="cost" slot-scope="text">{{ text | decimalsHandle }}</span>
|
|
|
+ <span slot="charge" slot-scope="text">{{ text | decimalsHandle }}</span>
|
|
|
+ <span slot="activation" slot-scope="text">{{ text | decimalsHandle }}</span>
|
|
|
+ <span slot="eventRegister" slot-scope="text">{{ text | decimalsHandle }}</span>
|
|
|
+ <span slot="eventPay" slot-scope="text">{{ text | decimalsHandle }}</span>
|
|
|
+ <span slot="formCount" slot-scope="text">{{ text | decimalsHandle }}</span>
|
|
|
+ <span slot="eventJinJianApp" slot-scope="text">{{ text | decimalsHandle }}</span>
|
|
|
+ <span slot="eventCreditGrantApp" slot-scope="text">{{ text | decimalsHandle }}</span>
|
|
|
+ <span slot="photoClick" slot-scope="text">{{ text | formatCurrency }}</span>
|
|
|
+ <span slot="photoShow" slot-scope="text">{{ text | formatCurrency }}</span>
|
|
|
+ <span slot="click" slot-scope="text">{{ text | formatCurrency }}</span>
|
|
|
+ <span slot="showNum" slot-scope="text">{{ text | formatCurrency }}</span>
|
|
|
+ <span slot="convert" slot-scope="text">{{ text | formatCurrency }}</span>
|
|
|
+
|
|
|
+ <p slot="operation" slot-scope="text">
|
|
|
+ 平面:{{ text || '未绑定' }}
|
|
|
+ </p>
|
|
|
|
|
|
|
|
|
</a-table>
|
|
|
|
|
|
</div>
|
|
|
<a-modal v-model="relevantPeopleVisible" title="相关人员" :footer="null" :centered='true'>
|
|
|
- <p>编导:{{relevantPeopleData.planName || '暂无数据'}}</p>
|
|
|
- <p>剪辑:{{relevantPeopleData.clipName || '暂无数据'}}</p>
|
|
|
- <p>拍摄:{{relevantPeopleData.shotName || '暂无数据'}}</p>
|
|
|
+ <p>编导:{{relevantPeopleData.planName || '无'}}</p>
|
|
|
+ <p>剪辑:{{relevantPeopleData.clipName || '无'}}</p>
|
|
|
+ <p>拍摄:{{relevantPeopleData.shotName || '无'}}</p>
|
|
|
</a-modal>
|
|
|
- <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
|
|
|
+ <a-modal v-model="Videovisible" title="图片展示" @ok="videoOk" :footer="null" width="800px" style="text-align:center">
|
|
|
<img
|
|
|
@click.stop
|
|
|
class="video"
|
|
|
:src="videoUrl"
|
|
|
controls="controls"
|
|
|
- style="height:600px;width:100%"
|
|
|
+ style="height:400px;width:auto"
|
|
|
/>
|
|
|
</a-modal>
|
|
|
</div>
|
|
@@ -144,7 +160,7 @@ const TTcolumns = [
|
|
|
key:'operation',
|
|
|
scopedSlots: { customRender: 'operation' },
|
|
|
align: 'center',
|
|
|
- width:100,
|
|
|
+ width:150,
|
|
|
fixed: 'left'
|
|
|
},
|
|
|
|
|
@@ -181,23 +197,23 @@ const TTcolumns = [
|
|
|
scopedSlots: { customRender: 'convert' },
|
|
|
sorter: () => {}
|
|
|
},
|
|
|
- {
|
|
|
- title: '上传时间',
|
|
|
- dataIndex: 'statDate',
|
|
|
- scopedSlots: { customRender: 'statDate' },
|
|
|
- align: 'center',
|
|
|
- sorter: () => {}
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // title: '上传时间',
|
|
|
+ // dataIndex: 'statDate',
|
|
|
+ // scopedSlots: { customRender: 'statDate' },
|
|
|
+ // align: 'center',
|
|
|
+ // sorter: () => {}
|
|
|
+ // },
|
|
|
]
|
|
|
const KScolumns = [
|
|
|
{
|
|
|
title: '图片',
|
|
|
- dataIndex: 'videoU',
|
|
|
+ dataIndex: 'imageUrl',
|
|
|
align: 'center',
|
|
|
width: 100,
|
|
|
fixed: 'left',
|
|
|
- key: 'videoU',
|
|
|
- scopedSlots: { customRender: 'videoU' }
|
|
|
+ key: 'imageUrl',
|
|
|
+ scopedSlots: { customRender: 'imageUrl' }
|
|
|
},
|
|
|
{
|
|
|
title: '图片ID',
|
|
@@ -215,54 +231,94 @@ const KScolumns = [
|
|
|
},
|
|
|
{
|
|
|
title:'相关人员',
|
|
|
- dataIndex:'userName',
|
|
|
- key:'userName',
|
|
|
- scopedSlots: { customRender: 'userName' },
|
|
|
+ dataIndex:'operation',
|
|
|
+ key:'operation',
|
|
|
+ scopedSlots: { customRender: 'operation' },
|
|
|
align: 'center',
|
|
|
- width:100,
|
|
|
+ width:150,
|
|
|
fixed: 'left'
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: '消耗',
|
|
|
- dataIndex: 'cost',
|
|
|
+ dataIndex: 'charge',
|
|
|
|
|
|
- scopedSlots: { customRender: 'cost' },
|
|
|
+ scopedSlots: { customRender: 'charge' },
|
|
|
align: 'center',
|
|
|
sorter: () => {}
|
|
|
},
|
|
|
{
|
|
|
title: '点击数',
|
|
|
- dataIndex: 'clickMaterial',
|
|
|
+ dataIndex: 'photoClick',
|
|
|
align: 'center',
|
|
|
|
|
|
- scopedSlots: { customRender: 'clickMaterial' },
|
|
|
+ scopedSlots: { customRender: 'photoClick' },
|
|
|
sorter: () => {}
|
|
|
// (a, b) => a.clickMaterial - b.clickMaterial
|
|
|
},
|
|
|
{
|
|
|
title: '展示数',
|
|
|
- dataIndex: 'showMaterial',
|
|
|
+ dataIndex: 'photoShow',
|
|
|
align: 'center',
|
|
|
|
|
|
- scopedSlots: { customRender: 'showMaterial' },
|
|
|
+ scopedSlots: { customRender: 'photoShow' },
|
|
|
sorter: () => {}
|
|
|
},
|
|
|
{
|
|
|
- title: '转化数',
|
|
|
- dataIndex: 'convertMaterial',
|
|
|
+ title: '激活成本',
|
|
|
+ dataIndex: 'activation',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ scopedSlots: { customRender: 'activation' },
|
|
|
+ sorter: () => {}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '注册成本',
|
|
|
+ dataIndex: 'eventRegister',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ scopedSlots: { customRender: 'eventRegister' },
|
|
|
+ sorter: () => {}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '付费成本',
|
|
|
+ dataIndex: 'eventPay',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ scopedSlots: { customRender: 'eventPay' },
|
|
|
+ sorter: () => {}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '表单提交成本',
|
|
|
+ dataIndex: 'formCount',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ scopedSlots: { customRender: 'formCount' },
|
|
|
+ sorter: () => {}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '完件成本',
|
|
|
+ dataIndex: 'eventJinJianApp',
|
|
|
align: 'center',
|
|
|
|
|
|
- scopedSlots: { customRender: 'convertMaterial' },
|
|
|
+ scopedSlots: { customRender: 'eventJinJianApp' },
|
|
|
sorter: () => {}
|
|
|
},
|
|
|
{
|
|
|
- title: '上传时间',
|
|
|
- dataIndex: 'materialUploadTime',
|
|
|
- scopedSlots: { customRender: 'materialUploadTime' },
|
|
|
+ title: '授信成本',
|
|
|
+ dataIndex: 'eventCreditGrantApp',
|
|
|
align: 'center',
|
|
|
+
|
|
|
+ scopedSlots: { customRender: 'eventCreditGrantApp' },
|
|
|
sorter: () => {}
|
|
|
},
|
|
|
+ // {
|
|
|
+ // title: '上传时间',
|
|
|
+ // dataIndex: 'materialUploadTime',
|
|
|
+ // scopedSlots: { customRender: 'materialUploadTime' },
|
|
|
+ // align: 'center',
|
|
|
+ // sorter: () => {}
|
|
|
+ // },
|
|
|
]
|
|
|
|
|
|
|
|
@@ -318,7 +374,7 @@ export default {
|
|
|
videoUrl: '',
|
|
|
|
|
|
//是否显示导出按钮
|
|
|
- exportExcelIsOk: true,
|
|
|
+ exportExcelIsOk: false,
|
|
|
consumeValue: 0,
|
|
|
|
|
|
columns: [...TTcolumns],
|
|
@@ -350,14 +406,16 @@ export default {
|
|
|
methods: {
|
|
|
tabChange(val){
|
|
|
this.accountIds=[];
|
|
|
- if(this.tabKeys==1){
|
|
|
+ this.data=[]
|
|
|
+ if(this.tabKeys==1){
|
|
|
this.treeData=this.TTaccountList;
|
|
|
this.columns=this.TTcolumns;
|
|
|
-
|
|
|
+ this.HttpPost('/image/bytedance/cost')
|
|
|
}else if (this.tabKeys==2){
|
|
|
this.treeData=this.KSaccountList;
|
|
|
this.columns=this.KScolumns
|
|
|
- }
|
|
|
+ this.HttpPost('/image/kuaishou/cost')
|
|
|
+ }
|
|
|
},
|
|
|
treeChange(val) {
|
|
|
// console.log(this.treeData)
|
|
@@ -421,7 +479,7 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
this.ipagination.current=pagination.current
|
|
|
- this.HttpPost()
|
|
|
+ // this.HttpPost()
|
|
|
},
|
|
|
moment,
|
|
|
//select切换---项目
|
|
@@ -445,8 +503,12 @@ export default {
|
|
|
consumeOnChange() {},
|
|
|
//查询按钮
|
|
|
searchRes() {
|
|
|
- this.date = []
|
|
|
- this.HttpPost()
|
|
|
+ this.data=[];
|
|
|
+ if(this.tabKeys==1){
|
|
|
+ this.HttpPost('/image/bytedance/cost')
|
|
|
+ }else if (this.tabKeys==2){
|
|
|
+ this.HttpPost('/image/kuaishou/cost')
|
|
|
+ }
|
|
|
},
|
|
|
loadShow(){
|
|
|
show++
|
|
@@ -457,10 +519,10 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//网络请求table数据函数
|
|
|
- HttpPost(sort){
|
|
|
+ HttpPost(url){
|
|
|
this.loading=true;
|
|
|
show = 0
|
|
|
- postAction('/image/bytedance/cost', {
|
|
|
+ postAction(url, {
|
|
|
startDate: this.timedata[0],
|
|
|
endDate: this.timedata[1],
|
|
|
code: this.videoID,
|
|
@@ -493,31 +555,28 @@ export default {
|
|
|
},
|
|
|
//导出报表
|
|
|
exportExcel() {
|
|
|
- // var params = {}
|
|
|
- // params.projectId = this.projectId
|
|
|
- // params.disCount = this.discount
|
|
|
- // params.statDate = this.statDate.format('YYYY-MM-DD')
|
|
|
- // var name = this.dataElse.filter(item => {
|
|
|
- // return item.projectId == this.projectId
|
|
|
- // })[0].projectName
|
|
|
- // downFilePost('/ctop/yiche/report/exportDailyReport', params).then(res => {
|
|
|
- // let blob = new Blob([res], {
|
|
|
- // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
|
- let column = this.columns.map((item, index) => {
|
|
|
- return item.dataIndex
|
|
|
- })
|
|
|
- let columns=['url',...column]
|
|
|
+ this.exportExcelIsOk=true;
|
|
|
+
|
|
|
+ // let column = this.columns.map((item, index) => {
|
|
|
+ // return item.dataIndex
|
|
|
+ // })
|
|
|
+ // let columns=['url',...column]
|
|
|
+ let url=''
|
|
|
+ if(this.tabKeys==1){
|
|
|
+ url='/image/bytedance/cost/export'
|
|
|
+ }else{
|
|
|
+ url='/image/kuaishou/cost/export'
|
|
|
+ }
|
|
|
|
|
|
- downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListTotalExportExcel', {
|
|
|
- columns,
|
|
|
- signature: this.videoID,
|
|
|
+ downFilePost(url, {
|
|
|
startDate: this.timedata[0],
|
|
|
- endDate: this.timedata[1],
|
|
|
- cost: this.consumeValue,
|
|
|
- accountIds:this.appId,
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ code: this.videoID,
|
|
|
+ accountList:this.accountIds,
|
|
|
}).then(res => {
|
|
|
+
|
|
|
let blob = new Blob([res], {
|
|
|
- type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
|
+ type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
|
})
|
|
|
let downloadElement = document.createElement('a')
|
|
|
let href = window.URL.createObjectURL(blob) //创建下载的链接
|
|
@@ -527,6 +586,7 @@ export default {
|
|
|
downloadElement.click() //点击下载
|
|
|
document.body.removeChild(downloadElement) //下载完成移除元素
|
|
|
window.URL.revokeObjectURL(href) //释放掉blob对象
|
|
|
+ this.exportExcelIsOk=false;
|
|
|
})
|
|
|
},
|
|
|
|
|
@@ -611,20 +671,102 @@ export default {
|
|
|
// },
|
|
|
|
|
|
filters: {
|
|
|
- toPercentage(val) {
|
|
|
- return (val * 100).toFixed(2) + '%'
|
|
|
- // return val
|
|
|
- },
|
|
|
+
|
|
|
toshowTime(val) {
|
|
|
// console.log(val, this.timedata)
|
|
|
// return this.timedata[0] + '~' + this.timedata[1]
|
|
|
return val
|
|
|
},
|
|
|
- tofixed(val) {
|
|
|
- return Number(val).toFixed(2)
|
|
|
- }
|
|
|
+ toPercentage(val) {
|
|
|
+ if(val){
|
|
|
+ if(typeof val != 'string'){
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ }else{
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //保留两位小数并且变成货币格式
|
|
|
+ decimalsHandle(val){
|
|
|
+
|
|
|
+ if(val && typeof val !='string'){
|
|
|
+ if(val>=0){
|
|
|
+ val=parseFloat(val).toFixed(2);
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('.')
|
|
|
+
|
|
|
+ let str0=str[0].split('').reverse();
|
|
|
+ for (let i = 0; i < str0.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str0.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str0.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str0.length; j++) {
|
|
|
+ handleResult += str0[j]
|
|
|
+ }
|
|
|
+
|
|
|
+ return handleResult+'.'+str[1]
|
|
|
+ }else{
|
|
|
+ val=parseFloat(val).toFixed(2);
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('.')
|
|
|
+
|
|
|
+ let str0=str[0].substr(1).split('').reverse();
|
|
|
+ for (let i = 0; i < str0.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str0.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str0.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str0.length; j++) {
|
|
|
+ handleResult += str0[j]
|
|
|
+ }
|
|
|
+
|
|
|
+ return '-'+handleResult+'.'+str[1]
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //变成货币格式
|
|
|
+ formatCurrency(val){
|
|
|
+ if((val||val==0)&& typeof val !='string'){
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('').reverse()
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str.length; j++) {
|
|
|
+ handleResult += str[j]
|
|
|
+ }
|
|
|
+ return handleResult
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return '-'
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
+
|
|
|
mounted() {
|
|
|
|
|
|
//进入页面默认展示昨天到今天的数据
|
|
@@ -633,7 +775,7 @@ export default {
|
|
|
,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
|
|
|
// this.loading=true;
|
|
|
|
|
|
- this.HttpPost()
|
|
|
+ this.HttpPost('/image/bytedance/cost')
|
|
|
this.accountHttp(1);
|
|
|
this.accountHttp(2);
|
|
|
|
|
@@ -671,7 +813,8 @@ export default {
|
|
|
}
|
|
|
.timeDiv {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: flex-start;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
span {
|
|
|
margin-left: 5px;
|