|
@@ -106,6 +106,7 @@
|
|
<span slot="cost" slot-scope="cost">{{cost | decimalsHandle}}</span>
|
|
<span slot="cost" slot-scope="cost">{{cost | decimalsHandle}}</span>
|
|
|
|
|
|
<span slot="performance" slot-scope="performance">{{performance | decimalsHandle}}</span>
|
|
<span slot="performance" slot-scope="performance">{{performance | decimalsHandle}}</span>
|
|
|
|
+ <span slot="point" slot-scope="point">{{ point | pointHandle }}</span>
|
|
<span slot="mediaType" slot-scope="text">
|
|
<span slot="mediaType" slot-scope="text">
|
|
<span v-if="text==1">头条</span>
|
|
<span v-if="text==1">头条</span>
|
|
<span v-if="text==2">快手</span>
|
|
<span v-if="text==2">快手</span>
|
|
@@ -115,32 +116,37 @@
|
|
</a-table>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
<!-- 明细表 -->
|
|
<!-- 明细表 -->
|
|
- <div class="detailBox">
|
|
|
|
- <a-modal v-model="visibleDetail" title="详细信息" width="55%" :footer="null" id="detailBox">
|
|
|
|
|
|
+ <div class="detailBoxPerform">
|
|
|
|
+ <a-modal v-model="visibleDetail" title="详细信息" width="55%" :footer="null" id="detailBoxPerform">
|
|
<!-- <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button> -->
|
|
<!-- <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button> -->
|
|
<div class="myTable">
|
|
<div class="myTable">
|
|
<a-table
|
|
<a-table
|
|
- :columns="detailColumns"
|
|
|
|
- :data-source="detailData"
|
|
|
|
- bordered
|
|
|
|
- tableLayout="auto"
|
|
|
|
- :pagination="false"
|
|
|
|
- :loading='loadingDetail'
|
|
|
|
- style="word-break: break-all;"
|
|
|
|
- id="myTable"
|
|
|
|
- :scroll="{ y: 500 }"
|
|
|
|
- >
|
|
|
|
|
|
+ :columns="detailColumns"
|
|
|
|
+ :data-source="detailData"
|
|
|
|
+ bordered
|
|
|
|
+ tableLayout="auto"
|
|
|
|
+ :pagination="false"
|
|
|
|
+ :loading='loadingDetail'
|
|
|
|
+ style="word-break: break-all;"
|
|
|
|
+ id="myTablePerform"
|
|
|
|
+ :scroll="{ y: 500 }"
|
|
|
|
+ >
|
|
<span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
|
|
<span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="totalCost" slot-scope="totalCost">{{ totalCost | decimalsHandle }}</span>
|
|
<span slot="materialCost" slot-scope="materialCost">{{ materialCost | decimalsHandle }}</span>
|
|
<span slot="materialCost" slot-scope="materialCost">{{ materialCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="oldCost" slot-scope="oldCost">{{ oldCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="newCost" slot-scope="newCost">{{ newCost | decimalsHandle }}</span>
|
|
<span slot="personCost" slot-scope="personCost">{{ personCost | decimalsHandle }}</span>
|
|
<span slot="personCost" slot-scope="personCost">{{ personCost | decimalsHandle }}</span>
|
|
<span slot="percent" slot-scope="percent">{{ percent | toPercentage }}</span>
|
|
<span slot="percent" slot-scope="percent">{{ percent | toPercentage }}</span>
|
|
|
|
+ <span slot="oldPercent" slot-scope="oldPercent">{{ oldPercent | toPercentage }}</span>
|
|
|
|
+ <span slot="newPercent" slot-scope="newPercent">{{ newPercent | toPercentage }}</span>
|
|
|
|
+
|
|
<div slot="urls" slot-scope="test,records">
|
|
<div slot="urls" slot-scope="test,records">
|
|
<img
|
|
<img
|
|
:src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"
|
|
:src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"
|
|
alt
|
|
alt
|
|
style="width:100px"
|
|
style="width:100px"
|
|
- @click="openVideo(records.url)"
|
|
|
|
-
|
|
|
|
|
|
+ @click="openVideo(records.url)"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
<span slot="mediaType" slot-scope="text">
|
|
<span slot="mediaType" slot-scope="text">
|
|
@@ -150,8 +156,10 @@
|
|
<span v-if="text==4">快手内广</span>
|
|
<span v-if="text==4">快手内广</span>
|
|
</span>
|
|
</span>
|
|
</a-table>
|
|
</a-table>
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+ <div class="fenye">
|
|
|
|
+ <a-pagination v-if="totalItem>0" v-model="currentPage" :total="totalItem" id="fenye" show-less-items style="margin: 20px 5px 5px;" size="small" @change="pageChange"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</a-modal>
|
|
</a-modal>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -173,6 +181,7 @@ import moment from 'moment';
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
import { JeecgListMixin } from '@/mixins/ipagination'
|
|
import { JeecgListMixin } from '@/mixins/ipagination'
|
|
|
|
|
|
|
|
+
|
|
const columnsFixd = [
|
|
const columnsFixd = [
|
|
{
|
|
{
|
|
title: '姓名',
|
|
title: '姓名',
|
|
@@ -335,55 +344,54 @@ const saleDetailColumns = [
|
|
title: '季度',
|
|
title: '季度',
|
|
dataIndex: 'quarters',
|
|
dataIndex: 'quarters',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'quarters' },
|
|
|
|
-
|
|
|
|
|
|
+ scopedSlots: { customRender: 'quarters' },
|
|
width:110
|
|
width:110
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '老客消耗',
|
|
title: '老客消耗',
|
|
- dataIndex: 'projectName',
|
|
|
|
|
|
+ dataIndex: 'oldCost',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'projectName' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'oldCost' },
|
|
|
|
|
|
width:120
|
|
width:120
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '新客消耗',
|
|
title: '新客消耗',
|
|
- dataIndex: 'authName',
|
|
|
|
|
|
+ dataIndex: 'newCost',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'authName' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'newCost' },
|
|
|
|
|
|
width:120,
|
|
width:120,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '老客提成比例',
|
|
title: '老客提成比例',
|
|
- dataIndex: 'projectName',
|
|
|
|
|
|
+ dataIndex: 'oldPercent',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'projectName' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'oldPercent' },
|
|
|
|
|
|
width:100
|
|
width:100
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '新客提成比例',
|
|
title: '新客提成比例',
|
|
- dataIndex: 'authName',
|
|
|
|
|
|
+ dataIndex: 'newPercent',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'authName' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'newPercent' },
|
|
|
|
|
|
width:100,
|
|
width:100,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '广告主名称',
|
|
title: '广告主名称',
|
|
- dataIndex: 'cost',
|
|
|
|
|
|
+ dataIndex: 'name',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'cost' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'name' },
|
|
|
|
|
|
width:200,
|
|
width:200,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '总消耗',
|
|
title: '总消耗',
|
|
- dataIndex: 'cost',
|
|
|
|
|
|
+ dataIndex: 'totalCost',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'cost' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'totalCost' },
|
|
sorter:()=>{}
|
|
sorter:()=>{}
|
|
},
|
|
},
|
|
]
|
|
]
|
|
@@ -391,9 +399,9 @@ const saleDetailColumns = [
|
|
const designDetailColumns = [
|
|
const designDetailColumns = [
|
|
{
|
|
{
|
|
title: '媒体类型',
|
|
title: '媒体类型',
|
|
- dataIndex: 'medialType',
|
|
|
|
|
|
+ dataIndex: 'mediaType',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'medialType' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'mediaType' },
|
|
width:100,
|
|
width:100,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -436,9 +444,9 @@ const designDetailColumns = [
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '职位',
|
|
title: '职位',
|
|
- dataIndex: 'jobName',
|
|
|
|
|
|
+ dataIndex: 'roleName',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'jobName' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'roleName' },
|
|
width:80,
|
|
width:80,
|
|
},
|
|
},
|
|
|
|
|
|
@@ -487,6 +495,11 @@ export default {
|
|
saleDetailColumns,//销售的详细表头
|
|
saleDetailColumns,//销售的详细表头
|
|
designDetailColumns,//设计的详细表头
|
|
designDetailColumns,//设计的详细表头
|
|
|
|
|
|
|
|
+ //fenye
|
|
|
|
+ currentPage:1,
|
|
|
|
+ totalItem:0,
|
|
|
|
+
|
|
|
|
+ currentRecord:null
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -502,6 +515,8 @@ export default {
|
|
}else if(this.department=='销售部'){
|
|
}else if(this.department=='销售部'){
|
|
this.columns=this.elseColumns;
|
|
this.columns=this.elseColumns;
|
|
this.detailColumns=this.saleDetailColumns
|
|
this.detailColumns=this.saleDetailColumns
|
|
|
|
+ }else{
|
|
|
|
+ this.columns=this.columnsFixd;
|
|
}
|
|
}
|
|
this.tableHttp();
|
|
this.tableHttp();
|
|
},
|
|
},
|
|
@@ -551,8 +566,11 @@ export default {
|
|
this.visibleDetail = true
|
|
this.visibleDetail = true
|
|
this.detailData = []
|
|
this.detailData = []
|
|
this.loadingDetail=true
|
|
this.loadingDetail=true
|
|
|
|
+ this.currentRecord=record
|
|
|
|
+ this.currentPage=1;
|
|
|
|
+ this.totalItem=0
|
|
if(record.department=='运营部'){
|
|
if(record.department=='运营部'){
|
|
- this.columns=this.columnsFixd;
|
|
|
|
|
|
+ // this.columns=this.columnsFixd;
|
|
this.detailColumns=this.operateDetailColumns;
|
|
this.detailColumns=this.operateDetailColumns;
|
|
postAction('/ctop/performance/show/operateDetail', {
|
|
postAction('/ctop/performance/show/operateDetail', {
|
|
year:record.year,
|
|
year:record.year,
|
|
@@ -574,7 +592,7 @@ export default {
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}else if(record.department=='设计部'){
|
|
}else if(record.department=='设计部'){
|
|
- this.columns=this.elseColumns;
|
|
|
|
|
|
+ // this.columns=this.elseColumns;
|
|
this.detailColumns=this.designDetailColumns;
|
|
this.detailColumns=this.designDetailColumns;
|
|
postAction('/ctop/performance/show/designDetail/1/10', {
|
|
postAction('/ctop/performance/show/designDetail/1/10', {
|
|
year:record.year,
|
|
year:record.year,
|
|
@@ -590,15 +608,17 @@ export default {
|
|
// this.detailData.push({ ...result, key: 1 })
|
|
// this.detailData.push({ ...result, key: 1 })
|
|
result.map((item, index) => {
|
|
result.map((item, index) => {
|
|
item.key = index;
|
|
item.key = index;
|
|
|
|
+ item.roleName=this.currentRecord.roleName
|
|
item.quarters=record.quarters
|
|
item.quarters=record.quarters
|
|
})
|
|
})
|
|
- this.detailData = result
|
|
|
|
|
|
+ this.detailData = result;
|
|
|
|
+ this.totalItem=res.result.total
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}else if(record.department=='销售部'){
|
|
}else if(record.department=='销售部'){
|
|
- this.columns=this.elseColumns;
|
|
|
|
|
|
+ // this.columns=this.elseColumns;
|
|
this.detailColumns=this.saleDetailColumns;
|
|
this.detailColumns=this.saleDetailColumns;
|
|
- postAction('/ctop/performance/show/operateDetail', {
|
|
|
|
|
|
+ postAction('/ctop/performance/show/saleDetail', {
|
|
year:record.year,
|
|
year:record.year,
|
|
quarter:record.quarter,
|
|
quarter:record.quarter,
|
|
userId:record.userId,
|
|
userId:record.userId,
|
|
@@ -713,29 +733,7 @@ export default {
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
|
|
- //请求详细信息
|
|
|
|
- detailHttp(){
|
|
|
|
- this.loadingDetail=true
|
|
|
|
- postAction(`ctop/performance/show/${this.ipagination.current}/${this.ipagination.pageSize}/desc`,{
|
|
|
|
- year:this.years,
|
|
|
|
- quarter:this.quarter,
|
|
|
|
- company:this.company,
|
|
|
|
- userName:this.nameValue,
|
|
|
|
- roleCode:this.position,
|
|
|
|
- mediaType:this.mediaType
|
|
|
|
- }).then(res=>{
|
|
|
|
- console.log(res)
|
|
|
|
- this.loadingDetail=false;
|
|
|
|
- if(res.success&&res.result.list.length>0){
|
|
|
|
- res.result.list.forEach((item,index)=>{
|
|
|
|
- item.key=index;
|
|
|
|
- item.quarter=item.year+'_'+item.quarter;
|
|
|
|
- })
|
|
|
|
- this.tableData=[...res.result.list]
|
|
|
|
- }
|
|
|
|
- this.ipagination.total = res.result.total
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
|
|
|
|
//打开视频
|
|
//打开视频
|
|
openVideo(val) {
|
|
openVideo(val) {
|
|
@@ -745,12 +743,55 @@ export default {
|
|
videoOk() {
|
|
videoOk() {
|
|
this.Videovisible = false
|
|
this.Videovisible = false
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ //f分页页码改变
|
|
|
|
+ pageChange(page, pageSize){
|
|
|
|
+ console.log(page, pageSize);
|
|
|
|
+ this.currentPage=page;
|
|
|
|
+ this.detailData=[];
|
|
|
|
+ this.loadingDetail=true;
|
|
|
|
+ postAction(`/ctop/performance/show/designDetail/${this.currentPage}/10`, {
|
|
|
|
+ year:this.currentRecord.year,
|
|
|
|
+ quarter:this.currentRecord.quarter,
|
|
|
|
+ userId:this.currentRecord.userId,
|
|
|
|
+ mediaType:this.currentRecord.mediaType
|
|
|
|
+ }).then(res => {
|
|
|
|
+ // let resArr = []
|
|
|
|
+ this.loadingDetail=false
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ let result = res.result.list
|
|
|
|
+ // this.detailData.push({ ...result, key: 1 })
|
|
|
|
+ result.map((item, index) => {
|
|
|
|
+ item.key = index;
|
|
|
|
+ item.roleName=this.currentRecord.roleName
|
|
|
|
+ item.quarters=this.currentRecord.quarters
|
|
|
|
+ })
|
|
|
|
+ this.detailData = result;
|
|
|
|
+ this.totalItem=res.result.total
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.getInfoHttp();
|
|
this.getInfoHttp();
|
|
this.tableHttp();
|
|
this.tableHttp();
|
|
},
|
|
},
|
|
filters: {
|
|
filters: {
|
|
|
|
+ pointHandle(val){
|
|
|
|
+ if(val){
|
|
|
|
+ if(typeof val != 'string'){
|
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
|
+ }else{
|
|
|
|
+ return val
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ else{
|
|
|
|
+ return '-'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
toPercentage(val) {
|
|
toPercentage(val) {
|
|
if(val){
|
|
if(val){
|
|
if(typeof val != 'string'){
|
|
if(typeof val != 'string'){
|
|
@@ -872,4 +913,17 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss">
|
|
|
|
+#detailBoxPerform{
|
|
|
|
+ padding: 20px 0 20px;
|
|
|
|
+ #myTablePerform{
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ }
|
|
|
|
+ .fenye{
|
|
|
|
+
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+}
|
|
</style>
|
|
</style>
|