|
@@ -7,7 +7,7 @@
|
|
|
<a-range-picker
|
|
|
:disabled-date="disabledDate"
|
|
|
format="YYYY-MM-DD"
|
|
|
- style="width: 200px;"
|
|
|
+ style="width: 250px;"
|
|
|
@change="dateChange"
|
|
|
v-model="dateRange"
|
|
|
/>
|
|
@@ -78,6 +78,8 @@
|
|
|
:loading="loading"
|
|
|
tableLayout="auto"
|
|
|
ref="vSummaryTable"
|
|
|
+ style="word-break: break-all;"
|
|
|
+ :width='tableWidth'
|
|
|
>
|
|
|
|
|
|
|
|
@@ -86,7 +88,7 @@
|
|
|
</span>
|
|
|
|
|
|
<div slot="videoU" slot-scope="test,records">
|
|
|
- <img :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'" alt="" style="height:200px;width:112.5px" @click="openVideo(records.url)">
|
|
|
+ <img :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'" alt="" style="width:140px" @click="openVideo(records.url)">
|
|
|
</div>
|
|
|
<span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
|
|
|
<span
|
|
@@ -141,6 +143,7 @@
|
|
|
bordered
|
|
|
tableLayout="auto"
|
|
|
:pagination="false"
|
|
|
+ style="word-break: break-all;"
|
|
|
>
|
|
|
<span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
|
|
|
|
|
@@ -199,7 +202,7 @@ const columnsFixd = [
|
|
|
|
|
|
{
|
|
|
title: '视频描述',
|
|
|
- dataIndex: 'materialName',
|
|
|
+ dataIndex: 'materialDesc',
|
|
|
align: 'center',
|
|
|
width: 100,
|
|
|
fixed: 'left'
|
|
@@ -232,7 +235,7 @@ let variableCol = [
|
|
|
title: '点击率',
|
|
|
dataIndex: 'ctr',
|
|
|
align: 'center',
|
|
|
- width: 50,
|
|
|
+
|
|
|
scopedSlots: { customRender: 'ctr' },
|
|
|
sorter: (a, b) => a.ctr - b.ctr
|
|
|
},
|
|
@@ -248,7 +251,7 @@ let variableCol = [
|
|
|
title: '25%进度播放率',
|
|
|
dataIndex: 'play25FeedBreakRate',
|
|
|
align: 'center',
|
|
|
- width:170,
|
|
|
+
|
|
|
scopedSlots: { customRender: 'play25FeedBreakRate' },
|
|
|
sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
|
|
|
},
|
|
@@ -340,6 +343,13 @@ let detailConsum = [
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+
|
|
|
+ //gudinglie
|
|
|
+ columnsFixd:columnsFixd,
|
|
|
+
|
|
|
+ //设置表格的列宽
|
|
|
+ tableWidth:'',
|
|
|
+
|
|
|
columnsFixd,
|
|
|
//是否打开视频
|
|
|
Videovisible:false,
|
|
@@ -521,34 +531,37 @@ export default {
|
|
|
this.visible = true
|
|
|
this.listNum = [...this.columns]
|
|
|
},
|
|
|
+
|
|
|
+ tableHandle(){
|
|
|
+ // this.listNum = [...this.columns]
|
|
|
+ console.log(this.listNum.length,this.columns)
|
|
|
+
|
|
|
+ if(this.listNum.length > 12|| this.columns.length>12){
|
|
|
+ this.tableWidth=120;
|
|
|
+ this.scrollX=this.columns.length*140
|
|
|
+ console.log(this.scrollX)
|
|
|
+ }else{
|
|
|
+ this.scrollX = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
//弹出框确定
|
|
|
handleOk(e) {
|
|
|
this.loading = false
|
|
|
|
|
|
this.visible = false
|
|
|
+ this.tableHandle()
|
|
|
if(this.listNum.length>=10){
|
|
|
|
|
|
let newlist=this.listNum.slice(columnsFixd.length)
|
|
|
console.log(newlist)
|
|
|
this.columns = [...columnsFixd,...newlist]
|
|
|
- }
|
|
|
-
|
|
|
- if (this.listNum.length > 12 && this.listNum.length<=13 ) {
|
|
|
- this.scrollX =1900
|
|
|
- console.log(this.$refs.vSummaryTable)
|
|
|
- }
|
|
|
- else if(this.listNum.length > 13 && this.listNum.length<=15){
|
|
|
- this.scrollX = (this.listNum.length - 12) * 1000
|
|
|
- }
|
|
|
- else if(this.listNum.length >15 && this.listNum.length<=17){
|
|
|
- this.scrollX = (this.listNum.length - 12) * 600
|
|
|
- }
|
|
|
- else if(this.listNum.length >=18){
|
|
|
- this.scrollX = (this.listNum.length - 12) * 400
|
|
|
}else{
|
|
|
- this.scrollX = 0
|
|
|
+ this.columns = [...this.listNum]
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
if (this.listNum.length == 6) {
|
|
|
this.columns.map((item, index) => {
|
|
|
item.width = 300
|
|
@@ -557,7 +570,7 @@ export default {
|
|
|
this.columns.map((item, index) => {
|
|
|
if (index == 1) {
|
|
|
item.width = 150
|
|
|
- } else if (index > 2 && index < 4 && index == 0) {
|
|
|
+ } else if (index >= 2 && index < 6 || index == 0) {
|
|
|
item.width = 100
|
|
|
}
|
|
|
})
|
|
@@ -657,30 +670,31 @@ export default {
|
|
|
this.statDate = moment().subtract(1, 'day')
|
|
|
moment().format('YYYY-MM-DD_HH:mm')
|
|
|
|
|
|
- postAction('/toutiao/videoReportDaily/getColumnJson', {
|
|
|
- columnType:4,
|
|
|
- }).then((res)=>{
|
|
|
- // console.log(res)
|
|
|
- if(res.success){
|
|
|
- // console.log(JSON.parse(res.result))
|
|
|
- let columns=JSON.parse(res.result)
|
|
|
- if(columns.length){
|
|
|
- if(columns.length>=columnsFixd.length){
|
|
|
- columns.map((item,index)=>{
|
|
|
- if(index>columnsFixd.length-1){
|
|
|
- item.sorter=function(a,b){ return a[item.dataIndex]-b[item.dataIndex]}
|
|
|
- }})
|
|
|
- columns=columns.slice(columnsFixd.length);
|
|
|
- this.columns=[...columnsFixd,...columns]
|
|
|
- }
|
|
|
+ // postAction('/toutiao/videoReportDaily/getColumnJson', {
|
|
|
+ // columnType:4,
|
|
|
+ // }).then((res)=>{
|
|
|
+ // // console.log(res)
|
|
|
+ // if(res.success){
|
|
|
+ // // console.log(JSON.parse(res.result))
|
|
|
+ // let columns=JSON.parse(res.result)
|
|
|
+ // if(columns.length){
|
|
|
+ // if(columns.length>=columnsFixd.length){
|
|
|
+ // columns.map((item,index)=>{
|
|
|
+ // if(index>columnsFixd.length-1){
|
|
|
+ // item.sorter=function(a,b){ return a[item.dataIndex]-b[item.dataIndex]}
|
|
|
+ // }})
|
|
|
+ // columns=columns.slice(columnsFixd.length);
|
|
|
+ // this.columns=[...columnsFixd,...columns]
|
|
|
+ this.tableHandle()
|
|
|
+ // }
|
|
|
|
|
|
|
|
|
- // console.log(this.columns)
|
|
|
- }
|
|
|
+ // // console.log(this.columns)
|
|
|
+ // }
|
|
|
|
|
|
- }
|
|
|
+ // }
|
|
|
|
|
|
- })
|
|
|
+ // })
|
|
|
},
|
|
|
deactivated() {
|
|
|
let arr = JSON.stringify(this.columns)
|
|
@@ -705,7 +719,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
+<style lang="less">
|
|
|
+.ant-table .ant-table-fixed-left .ant-table-thead {
|
|
|
+ height: 108px !important ;
|
|
|
+}
|
|
|
+.ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title{
|
|
|
+
|
|
|
+ // display:block;
|
|
|
+ white-space:normal;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="less" scoped>
|
|
|
.vsummary {
|
|
|
width: 100%;
|