|
@@ -112,6 +112,10 @@
|
|
|
@load="loadShow"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <span slot="operation" slot-scope="text, record">
|
|
|
+ <a href="javascript:;" @click="opendetail(text, record)" style="margin-right:5px">查看明细</a>
|
|
|
+ </span>
|
|
|
+
|
|
|
|
|
|
<span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
|
|
|
<span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
|
|
@@ -205,15 +209,33 @@
|
|
|
slot-scope="gameAddictionRate"
|
|
|
>{{ gameAddictionRate | toPercentage }}</span>
|
|
|
<!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
|
|
|
- <span slot="operation" slot-scope="text,record">
|
|
|
+ <span slot="relativePeople" slot-scope="text,record">
|
|
|
<a href="javascript:;" @click.stop="showRelevantPeople(record)">查看相关人员</a>
|
|
|
</span>
|
|
|
|
|
|
|
|
|
</a-table>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
<customColumn :visible='visible' :listNum='listNum' :fiexColumn='columnsFixd' :mediaType='2' @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
|
|
|
+
|
|
|
+ <!-- 明细表 -->
|
|
|
+
|
|
|
+ <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
|
|
|
+ <a-button type="default" @click="exportExcel" id="mybtn" >导出报表</a-button>
|
|
|
+ <a-table
|
|
|
+ :columns="detailConsum"
|
|
|
+ :data-source="detailData"
|
|
|
+ bordered
|
|
|
+ tableLayout="auto"
|
|
|
+ :pagination="false"
|
|
|
+ style="word-break: break-all;"
|
|
|
+ >
|
|
|
+ <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
|
|
|
+ </a-table>
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -239,25 +261,41 @@ const columnsFixd = [
|
|
|
title: '视频名称',
|
|
|
dataIndex: 'materialName',
|
|
|
align: 'center',
|
|
|
- width: 120,
|
|
|
+ width: 130,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频ID',
|
|
|
+ dataIndex: 'signature',
|
|
|
+ align: 'center',
|
|
|
+ width: 150,
|
|
|
fixed: 'left'
|
|
|
},
|
|
|
{
|
|
|
title: '项目名称',
|
|
|
dataIndex: 'projectName',
|
|
|
align: 'center',
|
|
|
- width: 100,
|
|
|
+ width: 150,
|
|
|
fixed: 'left'
|
|
|
},
|
|
|
{
|
|
|
title:'相关人员',
|
|
|
- dataIndex:'operation',
|
|
|
- key:'operation',
|
|
|
- scopedSlots: { customRender: 'operation' },
|
|
|
+ dataIndex:'relativePeople',
|
|
|
+ key:'relativePeople',
|
|
|
+ scopedSlots: { customRender: 'relativePeople' },
|
|
|
align: 'center',
|
|
|
width:120,
|
|
|
fixed: 'left'
|
|
|
},
|
|
|
+ // {
|
|
|
+ // title:'操作',
|
|
|
+ // dataIndex:'operation',
|
|
|
+ // key:'operation',
|
|
|
+ // scopedSlots: { customRender: 'operation' },
|
|
|
+ // align: 'center',
|
|
|
+ // width:90,
|
|
|
+ // fixed: 'left'
|
|
|
+ // },
|
|
|
|
|
|
{
|
|
|
title: '创建时间',
|
|
@@ -363,9 +401,71 @@ const columnsFixd = [
|
|
|
]
|
|
|
let show = 0
|
|
|
|
|
|
+let detailColumn = [
|
|
|
+ {
|
|
|
+ title: '客户',
|
|
|
+ dataIndex: 'advertiserName',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ customRender: (value, row, index) => {
|
|
|
+ const obj = {
|
|
|
+ children: value,
|
|
|
+ attrs: {}
|
|
|
+ }
|
|
|
+ if (index === 0) {
|
|
|
+ obj.attrs.rowSpan = 7
|
|
|
+ } else {
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ dataIndex: 'projectName',
|
|
|
+ align: 'center',
|
|
|
+ width:150,
|
|
|
+ customRender: (value, row, index) => {
|
|
|
+ const obj = {
|
|
|
+ children: value,
|
|
|
+ attrs: {}
|
|
|
+ }
|
|
|
+ if (index == 0) {
|
|
|
+ obj.attrs.rowSpan = 7
|
|
|
+ }else {
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDatetime',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '环比',
|
|
|
+ dataIndex: 'huanbi',
|
|
|
+ scopedSlots: { customRender: 'huanbi' },
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ //明细数据
|
|
|
+ visibleDetail:false,
|
|
|
+ detailColumn,
|
|
|
+ detailData: [],
|
|
|
+
|
|
|
exportLoading:false,
|
|
|
target:'cost',
|
|
|
order:'desc',
|
|
@@ -405,7 +505,7 @@ export default {
|
|
|
//自定义列的搜索框
|
|
|
searchInput: '',
|
|
|
//弹出框中现实的选中列数
|
|
|
- scrollX: 2000,
|
|
|
+ scrollX: 2200,
|
|
|
listNum: [],
|
|
|
//
|
|
|
form: [],
|
|
@@ -439,9 +539,33 @@ export default {
|
|
|
customColumn,
|
|
|
},
|
|
|
watch:{
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
+ //点击查看明细按钮的事件
|
|
|
+ opendetail(text, record) {
|
|
|
+ console.log(text, record)
|
|
|
+ this.visibleDetail = true
|
|
|
+ this.detailData = []
|
|
|
+ // this.signature=record.signature
|
|
|
+ // console.log(this.signature)
|
|
|
+ postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
|
|
|
+ startDate: this.dateValue[0].format('YYYY-MM-DD'),
|
|
|
+ endDate: this.dateValue[1].format('YYYY-MM-DD'),
|
|
|
+ signature: record.signature,
|
|
|
+ accountIds:this.appId
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ let result = res.result
|
|
|
+ // this.detailData.push({ ...result, key: 1 })
|
|
|
+ result.map((item, index) => {
|
|
|
+ item.key = index
|
|
|
+ })
|
|
|
+ this.detailData = result
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
closeCustomColumn(){
|
|
|
this.visible=false;
|
|
|
},
|
|
@@ -519,7 +643,8 @@ export default {
|
|
|
//查询按钮
|
|
|
searchRes() {
|
|
|
this.date = []
|
|
|
-
|
|
|
+ this.ipagination.current=1
|
|
|
+
|
|
|
this.HttpPost()
|
|
|
|
|
|
},
|
|
@@ -1071,4 +1196,7 @@ span {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+#mybtn {
|
|
|
+ margin: 0 10px 15px 0;
|
|
|
+}
|
|
|
</style>
|